کانواس HTML5

عنصر canvas برای ترسیم شکل‌ها روی صفحه وب استفاده می‌شود.

Canvas چیست؟

عنصر canvas HTML5 از JavaScript برای ترسیم تصاویر روی صفحه وب استفاده می‌کند.

کاغذ نقاشی یک محدوده مستطیلی است، شما می‌توانید هر پیکسل آن را کنترل کنید.

canvas دارای روش‌های مختلفی برای ترسیم مسیرها، مستطیل‌ها، دایره‌ها، حروف و اضافه کردن تصاویر است.

ایجاد عنصر Canvas

افزودن عنصر canvas به صفحه HTML5.

تعیین id، عرض و ارتفاع عنصر:

<canvas id="myCanvas" width="200" height="100"></canvas>

از طریق JavaScript برای ترسیم

عنصر canvas خودش توانایی ترسیم ندارد. تمامی کارهای ترسیم باید در JavaScript داخلی انجام شود:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript از طریق id برای پیدا کردن عنصر canvas استفاده می‌کند:

var c=document.getElementById("myCanvas");

سپس، شیء context ایجاد می‌شود:

var cxt=c.getContext("2d");

عنصر getContext("2d") یک عنصر داخلی HTML5 است که دارای روش‌های مختلفی برای نقاشی مسیرها، مستطیل‌ها، دایره‌ها، حروف و اضافه کردن تصاویر است.

دو خط کد زیر یک مستطیل قرمز را نقاشی می‌کنند:

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

روش fillStyle آن را به رنگ قرمز می‌کند، و روش fillRect شکل، مکان و اندازه را مشخص می‌کند.

فهمیدن مختصات

روش fillRect دارای پارامترهایی (0,0,150,75) است.

این به معنای نقاشی یک مستطیل 150x75 است که از گوشه بالا چپ (0,0) شروع می‌شود.

همانطور که در تصویر زیر نشان داده شده است، مختصات X و Y کanvas برای تعیین مکان نقاشی روی کanvas استفاده می‌شوند.

مثال کانواس: درک مختصات

مثال: با قرار دادن موس روی مستطیل می‌توانید مختصات را ببینید

مثال‌های بیشتری از Canvas

در اینجا چند مثال دیگر از نقاشی روی عنصر canvas آورده شده است:

مثال - خط

با مشخص کردن مکان شروع و پایان، یک خط نقاشی کنید:

مثال کانواس: خطوط

کد JavaScript:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>

عنصر canvas:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
این مرورگر از عنصر canvas پشتیبانی نمی‌کند.
</canvas>

آزمایش کنید

مثال - دایره

با تعیین اندازه، رنگ و مکان، یک دایره نقاشی کنید:

مثال کانواس: دایره‌ها

کد JavaScript:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>

عنصر canvas:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
این مرورگر از عنصر canvas پشتیبانی نمی‌کند.
</canvas>

آزمایش کنید

مثال - تدریج

با استفاده از رنگ‌های مشخص شده توسط شما پس‌زمینه تدریجی را نقاشی کنید:

مثال کانواس: تدریجی

کد JavaScript:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>

عنصر canvas:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
این مرورگر از عنصر canvas پشتیبانی نمی‌کند.
</canvas>

آزمایش کنید

مثال - تصویر

تصویری را در کانواس قرار دهید:

مثال کانواس: تصاویر

کد JavaScript:

<script>
window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("scream");
   ctx.drawImage(img, 10, 10);
};
</script>

عنصر canvas:

<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;">
این مرورگر از برچسب HTML5 canvas پشتیبانی نمی‌کند.
</canvas>

آزمایش کنید

آموزش HTML Canvas

برای یادگیری بیشتر در مورد کانواس، لطفاً از آموزش HTML Canvas.

صفحات مرتبط

دستورالعمل‌های مرجع:برچسب <canvas> HTML5

دستورالعمل‌های مرجع:موضوع Canvas DOM HTML