API Canvas

يحدد عنصر <canvas> منطقة البitmap في صفحة HTML.

يُمكن لـ JavaScript رسم رسوم على اللوحة باستخدام API Canvas.

يستطيع API Canvas رسم أشكال، خطوط، منحنيات، مربعات، نصوص، صور، وكذلك ألوان، دوران، شفافية، وأيضاً عمليات بكسل.

إضافة Canvas إلى HTML

يمكنك استخدام علامة <canvas> لإضافة عنصر canvas في أي مكان في صفحة HTML:

مثال

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

جرب بنفسك

كيفية الوصول إلى عنصر Canvas

يمكنك استخدام طريقة DOM HTML getElementById() لتحديد عنصر <canvas>:

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

لرسم على الورق، يجب إنشاء كائن سياق 2D:

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

ملاحظة

عنصر <canvas> في HTML لا يحتوي على وظائف الرسم.

عليك استخدام 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();

جرب بنفسك