ایچ تی ایم ایل ڈ او کینواس آئیگنٹ

<canvas> عناصر کو HTML پیج میں بٹن نمائش علاقہ کا تعریف کرتا ہے。

کینواس API جوائ� کینواس پر گرافکس بنانے کی اجازت فراہم کرتا ہے。

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

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

آپ کسی بھی مقام پر کینواس عناصر کو <canvas> ٹیگ کے ذریعے HTML پیج میں شامل کرسکتے ہیں:

مثال

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

آزمایش کنید

کینواس عناصر کو کیسے حاصل کیا جائے؟

آپ <canvas> عناصر کو getElementById() HTML DOM مدد سے حاصل کرسکتے ہیں:

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

برای ترسیم روی کanvas، باید یک شیء 2D context ایجاد کنید:

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

نکته

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

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

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

ترسیم روی کanvas

پس از ایجاد یک شیء 2D context، شما می‌توانید روی کanvas ترسیم کنید.

در روش 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);

آزمایش کنید

clearRect()

روش‌های رایج برای ترسیم روی کanvas:

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

آزمایش کنید