HTML5 Canvas

عنصر <canvas> در HTML5 برای کشیدن اشکال گرافیکی از طریق جاوا اسکریپت به کار می رود. این عنصر تنها به عنوان محفظه ای برای رسم شکل های گرافیکی است و برای رسم شکل ها می بایست از جاوا اسکریپت استفاده نمود. عنصر <canvas> دارای روش های متعدد برای رسم مسیرها، جعبه ها، حلقه ها، متن ها و اضافه کردن تصاویر است.

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

شماره زیر علامت مرورگر در جدول زیر، اولین نسخه از آن مرورگر است که به صورت کامل از عنصر <canvas> پشتیبانی می کند.

عنصر
<canvas> 4.0 9.0 2.0 3.1 9.0

عنصر <canvas> یک محدوده مربع شکل (برای ارجاع به جاوا اسکریپت به منظور رسم شکل) ایجاد کرده که به صورت پیشفرض فاقد حاشیه و محتوا است. شکل کلی این عنصر به صورت زیر است:

<canvas id="myCanvas" width="200" height="100"></canvas>
نکته: همیشه برای عنصر <canvas> شناسه id (برای ارجاع به جاوا اسکریپت) و مشخصه های width و height (برای تعیین اندازه) را قرار دهید. همچنین برای ایجاد حاشیه می توانید از CSS استفاده کنید.

در زیر یک نمونه شکل پایه و خالی از <canvas> آمده است.


مرورگر شما canvas را پشتیبانی نمی کند.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>


رسم خط


مرورگر شما canvas را پشتیبانی نمی کند.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
 


رسم دایره


مرورگر شما canvas را پشتیبانی نمی کند.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
 


نوشتن متن


مرورگر شما canvas را پشتیبانی نمی کند.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText(سلام",10,50");
 


نوشتن متن توخالی


مرورگر شما canvas را پشتیبانی نمی کند.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText(سلام",10,50");
 


رسم رنگ با گرادیان خطی


مرورگر شما convas را پشتیبانی نمی کند.

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 را پشتیبانی نمی کند.

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


رسم تصویر


مرورگر شما canvas را پشتیبانی نمی کند.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
 


دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *