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

این تاپیک 0 پاسخ و 1 مشارکت کننده دارد . آخرین آپدیت توسط :  صبا ...saba ،‏ 7 ماه و 4 هفته پیش .

این تاپیک تاکنون 32 بازدید داشته است .

نویسنده پست
پنجشنبه ، 14 آوریل 2016     4:21 ب.ظ #


صبا ...saba

Subscriber
0 پست669 تاپیک

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

مرورگرهای 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 id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
خودتان امتحان کنید »

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

مثال
<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 تنظیم کرده اید، پر می کند.

0  تشکر
پست 1 تا 1 (از مجموع 1 پست)

برای پاسخ دادن به این تاپیک باید وارد سایت شوید .