موضوع دالة DOM للشاشة

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

يُمكّن 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");

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

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

ملاحظة

لا يحتوي element HTML <canvas> على وظيفة الرسم.

يجب استخدام JavaScript لرسم أي شكل.

يُرجع method getContext() object يحتوي على أدوات الرسم (methods).

رسم على الورق

بعد إنشاء object 2D context، يمكنك رسم على الورق.

تُرسم في method 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);

جرب بنفسك

يمكنك أيضًا استخدام method 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();

جرب بنفسك