کانواس 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 در کanvas ترسیم می‌شود، از گوشه بالا چپ (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