کانواس API

<canvas> عنصر HTML صفح میں بیت مپ علاقہ کا تعریف کرتا ہے.

کانواس API جو JavaScript کو کانواس پر گرافیک درآوردن کا اجازت دیتا ہے.

کانواس API شکل، لائن، منحنی، فریم، متن اور تصاویر، نیز رنگ، چرخش، شفافیت اور دیگر پیکسل آپریشن کا نقاشی کرنا بھی دیتا ہے.

کانواس کو HTML میں شامل کریں

آپ <canvas> تگ کو HTML صفحه کی کسی بجای کا استعمال می‌توانید کانواس عنصر کا اضافه کریں:

مثال

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

آزمایش کنید

کيفية دسترسی به عنصر Canvas

آپ <canvas> عنصر کو getElementById() HTML DOM می‌توانید بگیرید:

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

برای ترسیم روی صفحه‌نما، باید یک شیء محیط 2D ایجاد کنید:

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

نکته

عنصر HTML <canvas> به تنهایی قابلیت ترسیم ندارد.

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

متد getContext() یک شیء با ابزارهای ترسیم (روش‌ها) را بازمی‌گرداند.

ترسیم روی صفحه‌نما

پس از ایجاد یک شیء 2D محیط، می‌توانید روی صفحه‌نما ترسیم کنید.

در اینجا روش 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();

آزمایش کنید