API Canvas

عنصر <canvas> یک منطقه رزمات در صفحه HTML را تعریف می‌کند.

API Canvas اجازه می‌دهد JavaScript در کانواس (canvas) تصاویر ترسیم کند.

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

افزودن Canvas به HTML

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

مثال

<canvas id="myCanvas" width="300" height="150"></canvas>

به طور شخصی امتحان کنید

چگونه به عنصر Canvas دسترسی پیدا کنید

شما می‌توانید از روش HTML DOM getElementById() برای دسترسی به عنصر <canvas> استفاده کنید:

const myCanvas = document.getElementById("myCanvas");

برای طراحی در کاغذ، باید object زمینه 2D ایجاد کنید:

const ctx = myCanvas.getContext("2d");

نکته

عنصر HTML <canvas> خود به هیچ عنوان قابلیت طراحی ندارد.

شما باید از JavaScript برای کشیدن هر نوع نمودار استفاده کنید.

روش getContext() یک object با ابزارهای طراحی (روش‌ها) را برمی‌گرداند.

در کاغذ طراحی کردن

پس از ایجاد 2D object زمینه، شما می‌توانید در کاغذ طراحی کنید.

در روش fillRect() زیر یک مستطیل سیاه با گوشه بالا سمت چپ در موقعیت 20,20 کشیده شده است. این مستطیل 150 پیکسل پهنا و 100 پیکسل ارتفاع دارد:

مثال

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

به طور شخصی امتحان کنید

از رنگ استفاده کنید

خصوصیت fillStyle رنگی که برای پر کردن شکل‌ها تنظیم می‌شود:

مثال

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

به طور شخصی امتحان کنید

شما همچنین می‌توانید از روش document.createElement() برای ایجاد یک عنصر جدید <canvas> استفاده کنید و آن را به صفحه HTML موجود اضافه کنید:

مثال

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

به طور شخصی امتحان کنید

مسیر

روش‌های معمولی برای کشیدن در کاغذ:

1. شروع مسیر - beginPath()
2. به یک نقطه حرکت کردن - moveTo()
3. در مسیر کشیدن - lineTo()
4. طرح‌پردازی - stroke()

مثال

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

به طور شخصی امتحان کنید