بوم نقاشی در HTML5
| Main Page Tutorial | |
|---|---|
 | |
| موارد آموزشی | |
| فرم‌های HTML | |
| گرافیک در HTML | |
| ۱ | بوم نقاشی |
| ۲ | SVG |
| رسانه در HTML | |
| APIها در HTML | |
| مثال‌ها | |
| مرجع HTML | |
عنصر <canvas> در HTML برای ترسیم‌های گرافیکی در یک صفحه به کار می‌رود.[۱]
شکل گرافیکی سمت راست با <canvas> کشیده شده‌است. چهار عنصر را نشان می‌دهد: مستطیل قرمز، مستطیل گرادیان (سایه روشن)، مستطیل چند رنگ، و یک متن چند رنگ.
HTML Canvas چیست؟
عنصر <canvas> در HTML برای رسم شکل‌های گرافیکی، در زمان اجرا از طریق جاوا اسکریپت استفاده می‌شود.
عنصر <canvas> تنها ظرف برای گرافیک است. در عمل برای ترسیم اشکال گرافیکی باید از جاوا اسکریپت استفاده کنید.
Canvas متدهای بسیاری برای ترسیم مسیرها، کادرها، دایره‌ها، متن و اضافه کردن تصاویر دارد.
پشتیبانی مرورگر
اعداد در جدول زیر اولین نسخهٔ مرورگرها را که بطور کامل از عنصر <canvas> پشتیبانی می‌کنند را مشخص می‌کند.
 |
 |
 |
 |
|
| ۴٫۰ | بله | بله | بله | ۹٫۰ |
مثال هایی از Canvas
Canvas یک ناحیه مستطیلی در صفحه HTML است. بطور پیش‌فرض، یک canvas هیچ محتوا و کادری ندارد.
نشانه گذاری آن به شکل زیر است:
<canvas id="myCanvas" width="200" height="100"></canvas>
توجه: همیشه ویژگی id را مشخص کنید (تا در اسکریپت به آن ارجاع داده شود) و ویژگی های width و height برای تعریف اندازه canvas.
style استفاده کنید.در ادامه مثالی از یک canvas پایه و خالی آمده‌است:
مثال
1 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
2 </canvas>
رسم یک خط
مثال
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();
رسم یک دایره
مثال
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();
رسم یک متن
مثال
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
مثال
1 var c = document.getElementById("myCanvas");
2 var ctx = c.getContext("2d");
3 ctx.font = "30px Arial";
4 ctx.strokeText("Hello World", 10, 50);
رسم یک گرادیان خطی
مثال
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);
رسم یک گرادیان دایره ای
مثال
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 کامل ما را مراجعه کنید.
منابع آموزشی