HTML5 Canvas
HTML5 Canvas چیست ؟
آموزش گرافیک html درس اول
HTML5 Canvas : عنصر <canvas> برای رسم گرافیک در یک صفحه وب استفاده می شود.
HTML Canvas چیست؟
عنصر <canvas> برای رسم گرافیک، از طریق جاوا اسکریپت استفاده می شود.
عنصر <canvas> فقط یک مکان برای گرافیک است. شما باید از جاوا اسکریپت برای رسم گرافیک استفاده کنید.
canvas دارای چندین روش برای رسم مسیرها، جعبه ها، حلقه ها، متن ها و اضافه کردن تصاویر است.
پشتیبانی مرورگر
اعداد برای مرورگرها نسخه اول مرورگر را مشخص می کند که به طور کامل از عنصر <canvas> پشتیبانی می کند.
chrome: 4.0
IE: 9.0
firefox : 2.0
safari : 3.1
opera :9.0
نمونه های canvas
یک canvas یک منطقه مستطیلی در یک صفحه HTML است. به طور پیشفرض یک canvas دارای مرز است و هیچ محتوایی ندارد.
نشانه گذاری به شرح زیر است:
[php]
<canvas id="myCanvas" width="200" height="100"></canvas>
[/php]
توجه: همیشه ویژگی id (برای اشاره به یک اسکریپت) را مشخص کنید و ویژگی width و height را برای تعیین اندازه بوم (canvas) مشخص کنید. برای اضافه کردن یک مرز(border) از ویژگی style استفاده کنید.
یک canvas خالی :
مثال :
[php]
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
[/php]
کشیدن یک خط :
مثال:
[php]
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
[/php]
کشیدن یک دایره :
مثال :
[php]
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
[/php]
کشیدن یک متن :
مثال :
[php]
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
[/php]
کشیدن متن توخالی :
مثال :
[php]
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
[/php]
کشیدن رنگ به شیب خطی (رنگ ها از کم رنگ به طرف پر رنگ می روند) :
مثال :
[php]
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);
[/php]
کشیدن یک شیب دایره ای ( دایره با رنگ پر رنگ و کم کم اطراف آن کم رنگ تر می شود ) :
مثال :
[php]
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);
[/php]
کشیدن تصویر :
مثال :
[php]
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
[/php]
دیدگاهتان را بنویسید