بوم نقاشی در HTML5

---

« صفحهٔ قبل

صفحهٔ بعد »

عنصر <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 پایه و خالی آمده‌است:

Your browser does not support the HTML5 canvas tag.

مثال

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

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

رسم یک خط

Your browser does not support the canvas element

مثال

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

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

رسم یک دایره

Your browser does not support the canvas element

مثال

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

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

رسم یک متن

Your browser does not support the canvas element

مثال

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

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

متن Stroke

Your browser does not support the canvas element

مثال

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

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

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

Your browser does not support the canvas element

مثال

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

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

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

Your browser does not support the canvas element

مثال

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

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

رسم یک تصویر

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

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

آموزش HTML Canvas

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

---

« صفحهٔ قبل

صفحهٔ بعد »