برای استفاده از همه امکانات سایت باید جاوا اسکریپت مرورگر خود را فعال کنید.

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

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

برای رسم اشکال گرافیکی توسط جاوا اسکریپت از تگ 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 به بالا پشتیبانی می شود.

مرورگر کروم فایرفاکس اپرا سافاری اینترنت اکسپلورر / اج
پشتیبانی 4 2 9 3.1 9


ویژگی ها

ویژگی مقدار توضیحات
height pixels ارتفاع Canvas را مشخص می کند.
width pixels عرض Canvas را مشخص می کند.


پشتیبانی از ویژگی ها و رویدادهای عمومی

تگ <canvas> از ویژگی های عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.


دستورات CSS پیش فرض

معمولا مرورگرها تگ canvas را بصورت پیش فرض با دستورات CSS زیر نمایش می دهند.

canvas {
  height: 150px;
  width: 300px;
}

 

موضوع: آموزش HTML
کلمات کلیدی: ، ، ، ، ، ، ، ، ، ، ،

نظرات نظرات تا اطلاع ثانوی غیر فعال است.