سبد (0)

عنصر canvas در HTML5

عنصر <canvas>

عنصر <canvas> در HTML5 از طریق اسکریپت نویسی (معمولاً JavaScript) برای رسم اشکال در یک صفحه وب استفاده می کند.

عنصر Canvas متدهای زیادی برای رسم مستطیل، دایره، خطوط، حروف و همچنین افزودن تصاویر دارد.

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

Internet Explorer Firefox Opera Google Chrome Safari

مرورگرهای Internet Explorer 9+, Firefox, Opera, Chrome, Safari عنصر <canvas> را پشتیبانی می کنند.

توجه: Internet Explorer 8 و نسخه های قدیمی تر آن، عنصر <canvas> را پشتیبانی نمی کنند.

ایجاد عنصر <canvas>

عنصر <canvas> یک ناحیه مستطیل شکل برای نقاشی کشیدن در صفحه HTML ایجاد می کند.

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

نحوه استفاده:

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

توجه: همیشه در عنصر <canvas>، خصوصیت های id (برای مراجعه به آن در یک اسکریبت)، width و height را تنظیم نمایید.

نکته: می توانید چندین عنصر <canvas> را در یک صفحه HTML ایجاد نمایید.

برای اضافه کردن لبه به عنصر <canvas>، از خصوصیت style استفاده نمایید:

مثال (عنصر canvas در HTML5)

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
خودتان امتحان کنید »

رسم کردن داخل <canvas> با JavaScript

تمام کارها در عنصر <canvas> توسط JavaScript انجام می شود:

مثال (عنصر canvas در HTML5)

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
خودتان امتحان کنید »

توضیح مثال:

ابتدا عنصر <canvas> را پیدا می کنیم:

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

سپس، متد ()getContext را صدا می زنیم (باید آنرا با پارامتر رشته ای "2d" تنظیم نمایید):

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

شیء ()getContext یکی از اشیاء توکار HTML5 است، که دارای خصوصیات و متدهای برای رسم مسیرها، جعبه، دایره، متن، عکس و ... است.

دو خط بعدی، یک مستطیل قرمز رنگ رسم می کند:

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

خصوصیت fillStyle را می توان با یک رنگ، یک طیف (gradient) و یا یک الگو مقدار دهی نمود. مقدار پیشفرض fillStyle، رنگ سیاه یعنی "000000#" است.

متد ()fillRect یک مستطیل رسم می کند و آنرا با مقداری که برای خصوصیت fillStyle تنظیم کرده اید، پر می کند.

مختصات در <canvas>

<canvas> یک شبکه دوبعدی است.

مختصات گوشه ی سمت چپ-بالا (0,0) است.

چهار پارامتر متد (0,0,150,75)fillRect که در مثال بالا استفاده شد به صورت زیر خواهد بود:

  • پارامتر اول(x): فاصله از چپ نسبت به محور x
  • پارامتر دوم(y): فاصله از بالا نسبت به محور y
  • پارامتر سوم(width): عرض مستطیل، یا فاصله از موقعیت x
  • پارامتر چهارم(height): ارتفاع مستطیل، یا فاصله از موقعیت y

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

مثال: در این مثال، با قرار دادن موس روی مستطیل، مختصات x و y نمایش داده می شود:

مثال (عنصر canvas در HTML5)

function cnvs_getCoordinates(e)
{
 x=e.clientX;
 y=e.clientY; 
 document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}
function cnvs_clearCoordinates()
{
 document.getElementById("xycoordinates").innerHTML="";
}
خودتان امتحان کنید »

رسم خط در <canvas>

برای رسم خطوط مستقیم در <canvas>، نیاز به دو متد زیر است:

moveTo(x,y) -

 نقطه شروع خط را تعریف می کند.

lineTo(x,y) -

 نقطه پایان خط را تعریف می کند.

عملاً برای رسم خط، یکی از متدهای "مرکب زدن" مانند ()stroke نیز باید استفاده شود.

مثال (عنصر canvas در HTML5)

در این مثال، نقطه شروع (0,0) و نقطه پایان (200,100) تعریف شده است. سپس برای رسم خط از متد ()stroke استفاده می کنیم.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
خودتان امتحان کنید »

برای رسم دایره یا یک منحنی در <canvas>، از متد زیر استفاده می کنیم:

arc(x,y,r,start,stop) -

پارامترهای متد ()arc:

  • x, y: رنگ سبزه در شکل بالا
  • r: شعاع دایره
  • start: رنگ قرمز در شکل بالا
  • stop: رنگ بنفش در شکل بالا

عملاً برای رسم دایره، یکی از متدهای "مرکب زدن" مانند ()stroke یا ()fill نیز باید استفاده شود.

مثال (عنصر canvas در HTML5)

ایجاد دایره با استفاده از متد ()arc:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
خودتان امتحان کنید »

متن در <canvas>

مهمترین خصوصیت ها و متدها برای نوشتن متن در <canvas>:

font -

خصوصیت font را برای متن تعریف می کند.

fillText(text,x,y) -

یک متن "تو پر" تعریف می کند.

strokeText(text,x,y) -

یک متن "تو خالی" تعریف می کند.

مثال (عنصر canvas در HTML5)

استفاده از متد ()fillText

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
خودتان امتحان کنید »

مثال 

استفاده از متد ()strokeText

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
خودتان امتحان کنید »

طیف رنگ در <canvas>

طیف رنگ را می توان برای رنگ آمیزی مستطیل، دایره، خط، متن و ... استفاده نمود. اشکال در <canvas> به رنگ های ثابت و یکنواخت محدود نمی شوند.

دو نوع مختلف طیف رنگ وجود دارد:

createLinearGradient(x,y,x1,y1) -

یک طیف رنگی خطی ایجاد می کند.

createRadialGradient(x,y,r,x1,y1,r1) -

یک طیف رنگی دایره ای ایجاد می کند.

زمانی که از شیء طیف رنگ (gradient) استفاده می کنید، باید حداقل دو رنگ تعریف نمایید.

متد ()addColorStop برای مشخص کردن رنگ ها استفاده می شود. موقعیت رنگ ها می تواند در هرجایی بین 0 و 1 در طول طیف رنگ باشد. پارامتر اول در این متد، موقعیت رنگ (عددی بین 0 و 1) و پارامتر دوم، مقدار رنگ است.

در ادامه باید طیف رنگ تعریف شده را برای خصوصیت fillStyle یا strokeStyle تنظیم نمایید و سپس شکلی مانند مستطیل، دایره، خط یا متن را رسم نمایید.

مثال (عنصر canvas در HTML5)

استفاده از متد ()createLinearGradient

JavaScript:

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 در HTML5)

استفاده از ()createRadialGradient

JavaScript:

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>

برای رسم عکس در <canvas>، از متد زیر استفاده می کنیم:

drawImage(image,x,y) -

مثال (عنصر canvas در HTML5)

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
خودتان امتحان کنید »
نوشته شده توسط امیر پهلوان صادق
بازدید: 36635

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه