بوم نقاشی در HTML5

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
فرم‌های HTML
گرافیک در HTML
۱بوم نقاشی
۲SVG
رسانه در HTML
APIها در HTML
مثال‌ها
مرجع HTML


HTML5 Canvas.png

عنصر <canvas> در HTML برای ترسیم‌های گرافیکی در یک صفحه به کار می‌رود.[۱]

شکل گرافیکی سمت راست با <canvas> کشیده شده‌است. چهار عنصر را نشان می‌دهد: مستطیل قرمز، مستطیل گرادیان (سایه روشن)، مستطیل چند رنگ، و یک متن چند رنگ.

HTML Canvas چیست؟

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

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

Canvas متدهای بسیاری برای ترسیم مسیرها، کادرها، دایره‌ها، متن و اضافه کردن تصاویر دارد.

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

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

Chrome.gif Edge.gif Firefox.gif Safari.gif Opera.gif
۴٫۰ بله بله بله ۹٫۰


مثال هایی از Canvas

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

نشانه گذاری آن به شکل زیر است:

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

توجه: همیشه ویژگی id را مشخص کنید (تا در اسکریپت به آن ارجاع داده شود) و ویژگی های width و height برای تعریف اندازه canvas.

برای اضافه کردن کادر، از ویژگی style استفاده کنید.

در ادامه مثالی از یک canvas پایه و خالی آمده‌است:

Your browser does not support the HTML5 canvas tag.

مثال

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


مشاهدهٔ نتیجه


رسم یک خط

Your browser does not support the canvas element

مثال

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


مشاهدهٔ نتیجه


رسم یک دایره

Your browser does not support the canvas element

مثال

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


مشاهدهٔ نتیجه


رسم یک متن

Your browser does not support the canvas element

مثال

1 var c = document.getElementById("myCanvas");
2 var ctx = c.getContext("2d");
3 ctx.font = "30px Arial";
4 ctx.fillText("Hello World", 10, 50);


مشاهدهٔ نتیجه


متن Stroke

Your browser does not support the canvas element

مثال

1 var c = document.getElementById("myCanvas");
2 var ctx = c.getContext("2d");
3 ctx.font = "30px Arial";
4 ctx.strokeText("Hello World", 10, 50);


مشاهدهٔ نتیجه


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

Your browser does not support the canvas element

مثال

 1 var c = document.getElementById("myCanvas");
 2 var ctx = c.getContext("2d");
 3 
 4 // Create gradient
 5 var grd = ctx.createLinearGradient(0, 0, 200, 0);
 6 grd.addColorStop(0, "red");
 7 grd.addColorStop(1, "white");
 8 
 9 // Fill with gradient
10 ctx.fillStyle = grd;
11 ctx.fillRect(10, 10, 150, 80);


مشاهدهٔ نتیجه


رسم یک گرادیان دایره ای

Your browser does not support the canvas element

مثال

 1 var c = document.getElementById("myCanvas");
 2 var ctx = c.getContext("2d");
 3 
 4 // Create gradient
 5 var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
 6 grd.addColorStop(0, "red");
 7 grd.addColorStop(1, "white");
 8 
 9 // Fill with gradient
10 ctx.fillStyle = grd;
11 ctx.fillRect(10, 10, 150, 80);


مشاهدهٔ نتیجه


رسم یک تصویر

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


مشاهدهٔ نتیجه


آموزش HTML Canvas

برای یادگیری کامل <canvas> در HTML، به آموزش HTML Canvas کامل ما را مراجعه کنید.


منابع آموزشی