التعامل مع عنصر Canvas باستخدام جافا سكريبت

في هذه المقالة سنوضح كيف تبدأ في استخدام (HTML5 Canvas)، وسنوضح كيفية تعيين أبعاد عنصر لوحة الرسم في (HTML) أو جافا سكريبت، تابع قراءة المقالة لمعرفة ذلك.

التعامل مع عنصر Canvas باستخدام جافا سكربت لرسم الأشكال

إنها عملية من خطوتين:

• أضف عنصر <canvas> إلى مستند (HTML) الخاص بك، مثل:

<canvas id = “myCanvas”></canvas>

• استخدم واجهة برمجة تطبيقات سياق (canvas) في جافا سكريبت للرسم:

const canvas = document.querySelector(“#myCanvas”)

const ctx= canvas.getContext(“2d”)

كيفية تعيين أبعاد عنصر لوحة الرسم في HTML أو جافا سكريبت

يمكن تعيين أبعاد عنصر لوحة الرسم بشكل ثابت في (HTML)، أو باستخدام جافا سكريبت، أو مزيج من الاثنين معًا، حيث أنة باستخدام (HTML):

<canvas id=”myCanvas” width=”200″ height=”300″></canvas>

باستخدام جافا سكريبت:

const canvas = document.querySelector(“#myCanvas”)

canvas.width = 200

canvas.height = 300

// To set width and height of current viewport do

// canvas.width = window.innerWidth

// canvas.height = window.innerHeight

• المستطيل: يمكن رسم المستطيلات باستخدام (fillRect (x ، y ، width ، height)) و(keystroke (x ، y ، width height)) كالتالي:

const ctx = canvas.getContext(“2d”)

// fill color of rectangle

ctx.fillStyle = “tomato”

// draw rectangle, and fill it with “tomato” color

// x = 10

// y = 20

// width = 200

// height = 300

ctx.fillRect(10, 20, 200, 300)

// now change style to stroke 

ctx.strokeStyle = “green”

// draw rectangle with “green” color stroke (no fill)

ctx.strokeRect(100, 100, 200, 100)

• السطر: لرسم خط بين نقطتين نستخدم طرق (Moveto (x ، y)) و(lineto (x ، y))، انظرما يلي:

ctx.beginPath();

// Point A

ctx.moveTo(350, 50);

// Point B

ctx.lineTo(400, 100);

ctx.strokeStyle = “DeepPink”

ctx.stroke();

• المثلث: المثلث هو ببساطة ثلاثة خطوط متصلة معًا، سنستخدم طريقة مسار خاصة تسمى (()ClosePath) لإكمال المثلت، حيث تضيف (ClosePath) بشكل أساسي خطًا مستقيمًا من إحداثيات النهاية إلى إحداثيات البدء داخل المسار، إذا افترضنا أن المثلث مصنوع من ثلاث نقاط (A ، B ،C)، فيمكننا رسم مثلثنا مثل:

ctx.beginPath();

// Point A

ctx.moveTo(250, 250);

// Point B

ctx.lineTo(500, 400);

// Point C

ctx.lineTo(100, 25);

// Join C & A

ctx.closePath()

ctx.strokeStyle = “Navy”

ctx.stroke();