برچسب <canvas> HTML

تعریف و استفاده

<canvas> برچسب‌ها معمولاً از طریق اسکریپت‌ها (معمولاً جاوااسکریپت) به صورت زنده تصویرها را رسم می‌کنند.

<canvas> برچسب شفاف است، تنها حاوی تصویر است و برای رسم واقعی تصویر باید از اسکریپت استفاده شود.

در مرورگرهایی که JavaScript را غیرفعال کرده‌اند و پشتیبانی نمی‌کنند <canvas> در مرورگرهای <canvas> متن‌های موجود در داخل عنصر.

توضیحات

در آموزش HTML Canvas ما در مورد <canvas> آشنایی بیشتری با این عنصر به دست آورید.

برای مشاهده تمام ویژگی‌ها و روش‌ها، لطفاً به منابع ما دستورالعمل مرجع کانواس HTML.

مثال

مثال 1

یک مستطیل قرمز را به صورت زنده ترسیم کنید و آن را در عنصر <canvas> نمایش دهید:

<canvas id="myCanvas">
مرورگر شما برچسب canvas را پشتیبانی نمی‌کند.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

آزمایش کنید

مثال 2

مثال دیگری از <canvas>:

<canvas id="myCanvas">
مرورگر شما برچسب canvas را پشتیبانی نمی‌کند.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// باز کردن شفافیت
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

آزمایش کنید

ویژگی

ویژگی مقدار توضیح
height مقادیر پیکسلی قانون‌گذاری ارتفاع نقاشی. مقادیر پیش‌فرض 150 است.
width مقادیر پیکسلی قانون‌گذاری عرض نقاشی. مقادیر پیش‌فرض 300 است.

ویژگی‌های جهانی

<canvas> این برچسب از ویژگی‌های رویداد نیز پشتیبانی می‌کند ویژگی‌های جهانی در HTML.

ویژگی‌های رویداد

<canvas> این برچسب از ویژگی‌های رویداد نیز پشتیبانی می‌کند ویژگی‌های رویداد در HTML.

تنظیمات CSS پیش‌فرض

بیشتر مرورگرها از مقادیر پیش‌فرض زیر برای نمایش استفاده می‌کنند <canvas> عنصر:

canvas {
  height: 150px;
  width: 300px;
}

آزمایش کنید

تاریخچه <canvas>

این عنصر HTML برای گرافیک ویکتوریایی کاربر طراحی شده است. خودش هیچ رفتاری ندارد، اما یک API نقاشی را به JavaScript کاربر نمایش می‌دهد تا اسکریپت‌ها بتوانند هر چیزی که می‌خواهند را روی یک نقاشی بکشند.

علامت <canvas> توسط Apple در مرورگر وب Safari 1.3 معرفی شد. دلایل این گسترش بنیادی در HTML این است که، توانایی‌های نقاشی HTML در Safari نیز توسط component Dashboard در Mac OS X Desktop استفاده می‌شود و Apple می‌خواست راهی برای پشتیبانی از گرافیک‌های اسکریپت‌شده در Dashboard داشته باشد.

Firefox 1.5 و Opera 9 از Safari پیروی کردند. این دو مرورگر نیز علامت <canvas> را پشتیبانی می‌کنند.

ما حتی می‌توانیم در IE از علامت <canvas> استفاده کنیم و با استفاده از کد‌های JavaScript منبع باز (که توسط Google راه‌اندازی شده) و پشتیبانی VML در IE، کanvas سازگار ایجاد کنیم. لطفاً به: مراجعه کنیدhttp://excanvas.sourceforge.net/.

تلاش‌های استانداردسازی <canvas> توسط یک انجمن غیر رسمی از تولیدکنندگان مرورگر وب پیشرفت کرده است، و در حال حاضر <canvas> به عنوان یک برچسب رسمی در طرح HTML 5 قرار دارد. لطفاً به: مراجعه کنیدhttp://www.whatwg.org/specs/web-apps/current-work/

تفاوت‌ها بین علامت <canvas> و SVG و VML

یکی از تفاوت‌های مهم بین علامت <canvas> و SVG و VML این است که، <canvas> یک API نقاشی بر اساس JavaScript دارد، در حالی که SVG و VML از یک مستند XML برای توصیف نقاشی استفاده می‌کنند.

این دو روش از نظر عملکردی برابر هستند و هر کدام می‌توانند با دیگری شبیه‌سازی شوند. از ظاهر، آنها بسیار متفاوت هستند، اما هر کدام مزایا و معایب خود را دارند. به عنوان مثال، نقاشی SVG به راحتی قابل ویرایش است، تنها کافی است عناصر را از توصیفات حذف کنید.

برای حذف یک عنصر از یک علامت <canvas> در یک شکل، معمولاً نیاز به پاک کردن نقاشی و دوباره آن را ترسیم کردن است.

راهنمای استفاده از علامت <canvas> برای نقاشی

بیشتر API‌های نقاشی Canvas در خود علامت <canvas> تعریف نشده‌اند، بلکه در مسیرهای خروجی از کanvas تعریف شده‌اند. روش getContext()یک شیء "محیط نقاشی" به دست می‌آید.

API Canvas از روش نمودارهای مسیر استفاده می‌کند. اما، مسیر توسط یک سری از فراخوانی‌های روش تعریف می‌شود، نه به عنوان یک رشته از حروف و اعداد، مانند فراخوانی‌های روش beginPath() و arc().

پس از تعریف مسیر، روش‌های دیگر مانند fill()، عملکرد بر روی این مسیر هستند. ویژگی‌های مختلف محیط رندر مانند fillStyle توضیح می‌دهند که چگونه این عملکردها استفاده می‌شوند.

نکته:یکی از دلایل کوچک بودن Canvas API این است که هیچ پشتیبانی برای رندر کردن متن ارائه نمی‌دهد. برای اضافه کردن متن به یک تصویر <canvas>، باید یا آن را خودتان رسم کنید و سپس با تصویر بیت‌مپ ترکیب کنید، یا از موقعیت CSS برای پوشاندن متن HTML در بالای <canvas> استفاده کنید.

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0