طراحی وب

HTML5 Canvas

HTML5 Canvas  چیست ؟

آموزش گرافیک  html  درس اول

HTML5 Canvas  : عنصر  <canvas> برای رسم گرافیک در یک صفحه وب استفاده می شود.

HTML Canvas چیست؟

عنصر  <canvas> برای رسم گرافیک،  از طریق جاوا اسکریپت استفاده می شود.

عنصر <canvas> فقط یک مکان  برای گرافیک است. شما باید از جاوا اسکریپت برای رسم گرافیک استفاده کنید.

canvas دارای چندین روش برای رسم مسیرها، جعبه ها، حلقه ها، متن ها و اضافه کردن تصاویر است.

HTML5 Canvas
HTML5 Canvas

پشتیبانی مرورگر

اعداد  برای مرورگرها  نسخه اول مرورگر را مشخص می کند که به طور کامل از عنصر <canvas> پشتیبانی می کند.

chrome:  ۴.۰

IE: 9.0

firefox : 2.0

safari : 3.1

opera :9.0

نمونه های canvas

یک canvas یک منطقه مستطیلی در یک صفحه HTML است. به طور پیشفرض یک canvas دارای مرز  است و هیچ محتوایی ندارد.

نشانه گذاری  به شرح زیر است:

 &lt;canvas id="myCanvas" width="200" height="100"&gt;&lt;/canvas&gt; 

 

توجه: همیشه ویژگی  id (برای اشاره به یک اسکریپت)  را مشخص کنید و  ویژگی width و height   را برای تعیین اندازه بوم (canvas)  مشخص کنید. برای اضافه کردن یک مرز(border) از ویژگی style استفاده کنید.

یک  canvas  خالی :

مثال :

 &lt;canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"&gt;
&lt;/canvas&gt; 

کشیدن یک خط :

مثال:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); 

کشیدن یک دایره :

مثال :

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke(); 

کشیدن یک متن :

مثال :

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50); 

کشیدن متن توخالی :

مثال :

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);

کشیدن رنگ به شیب خطی (رنگ ها از کم رنگ به طرف پر رنگ می روند) :

مثال :

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); 

کشیدن یک شیب دایره ای ( دایره با رنگ پر رنگ و کم کم اطراف آن کم رنگ تر می شود ) :

مثال :

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); 

کشیدن تصویر :

مثال :

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10); 

 

دوره آنلاین کسب و کار اینترنتی
برچسب ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دوره رایگان کسب و کار اینترنتی

10 جلسه به همراه فایل صوتی و ویدیویی
همین حالا شروع کنید
تا امروز بیش از 4000 نفر در این دوره شرکت کرده‌اند
بستن پیام
دانلود رایگان
یک ساعت اول
فیلم جلسه اول را ببینید
لینک دانلود را برایم ایمیل کن
لینک دانلود بلافاصله به ایمیل شما ارسال می‌شود
X
بستن