آموزش تگ canvas در HTML - راهنمای کار با اشکال گرافیکی در html

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

مثال: رسم مربع قرمز

<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

مثال: مربع های تو در تو

<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
//Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

مثال: نمایش متن درون تگ Canvas

<canvas id="mycanvas" width="200" height="120" style="border:2px solid #000;"></canvas>

<script>
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
ctx.font="30px Comic Sans MS";
ctx.fillStyle = "blue";
ctx.textAlign = "center";
ctx.fillText("Free-Learn", canvas.width/2, canvas.height/2);
</script>

مثال: رسم خط در canvas

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");

// 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);

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

تگ <canvas> در مرورگرهای کروم 4، فایرفاکس 2، اپرا 9، سافاری 3.1، اینترنت اکسپلورر و اج 9 به بالا پشتیبانی می شود.