50 کامل شده تا

برچسب <canvas> در اچ‌تی‌ام‌ال

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
مورد استفاده برای ترسیم گرافیک، در پرواز، از طریق اسکریپت نویسی (معمولاً JavaScript)
معرفی شده در نسخهٔ:۵
حذف شده در نسخهٔ: هنوز در حال استفاده است
ویژگی‌های مجاز:به پائین مراجعه کنید
تنظیمات پیش‌فرض CSS:به پائین مراجعه کنید


{{منو اسکرول چپ|نام منو={{مرجع منو اچ‌تی‌ام‌ال|expanded=مرجع}}}}

مثال

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

<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>


تعریف و کاربرد

برچسب <canvas> برای رسم کارهای گرافیکی بصورت شناور با کدنویسی (معمولاً جاوااسکریپت) است.[۱]

برچسب <canvas> تنها یک ظرف برای کارهای گرافیکی است، شما باید از کدنویسی استفاده کنید تا بتوانید به‌واقع رسم کارهای گرافیکی را انجام دهید.

هر متنی درون عنصر <canvas> در مرورگرهایی که از <canvas> پشتیبانی نمی‌کنند، (به صورت خام) نمایش داده خواهد شد.

نکات و ملاحظات

الگو:note

الگو:note

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

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

عنصر Chrome Internet Explorer / Edge Firefox Safari Opera
<canvas> ۴/۰ 9/۰ ۲/۰ ۳/۱ ۹/۰

ویژگی‌ها

ویژگی مقدار شرح
height pixels ارتفاع بوم (canvas) را مشخص می‌کند
width pixels پهنای بوم را مشخص می‌کند

ویژگی های سراسری (Global Attributes)

الگو:note

ویژگی های رویداد (Event Attributes)

الگو:note

مثال‌های بیشتر

مثال

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

<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
//Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>


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

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

مثال

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


منابع آموزشی