46 – رسومات HTML Canvas

يُستخدم عنصر <canvas> في HTML لرسم الرسومات على صفحة الويب. تم إنشاء الرسم التوضيحي باستخدام <canvas>. يعرض أربعة عناصر: مستطيل أحمر ، مستطيل متدرج ، مستطيل متعدد الألوان ، ونص متعدد الألوان.

ما هو HTML Canvas؟

يُستخدم عنصر <canvas> في HTML لرسم الرسومات بشكل حيوي باستخدام JavaScript. يعمل عنصر <canvas> كمساحة فارغة على صفحة الويب حيث يمكنك استخدام JavaScript لإنشاء الرسومات.

إن عنصر <canvas> هو مجرد حاوية للرسومات، ولا يقوم برسم أي شيء بحد ذاته. يجب استخدام JavaScript لرسم الرسومات داخله. يوفر Canvas طرقًا متعددة لرسم الأشكال الهندسية مثل الخطوط والمربعات والدوائر والنصوص، بالإضافة إلى إمكانية إضافة الصور.

دعم المتصفح

تحدد الأرقام في الجدول إصدار المتصفح الأول الذي يدعم عنصر <canvas> بشكل كامل.

من المهم ملاحظة أن هذه الإصدارات هي الحد الأدنى من المتصفحات التي تدعم Canvas بشكل كامل. من المحتمل أن تعمل Canvas أيضًا في إصدارات أحدث من هذه المتصفحات.

أمثلة على Canvas

ال Canvas عبارة عن منطقة مستطيلة على صفحة HTML. افتراضيًا، لا يحتوي Canvas على حدود ولا يعرض أي محتوى.

يبدو رمز HTML الخاص بتعريف Canvas كما يلي:

HTML

<canvas id="myCanvas" width="200" height="100"></canvas>

ملاحظة:

• حدد دائمًا سمة معرف (id) لاستخدامها في البرنامج النصي (script) للتعامل مع ال Canvas.
• حدد سمة العرض (width) والارتفاع (height) لتحديد حجم ال Canvas.
• لإضافة حدود، استخدم سمة النمط (style).

إليك مثال على Canvas أساسي فارغ:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>

سيؤدي هذا الكود إلى إنشاء Canvas فارغ بعرض 200 بكسل وارتفاع 100 بكسل وبحدود سوداء بسمك 1 بكسل.

إضافة JavaScript

بعد إنشاء منطقة Canvas المستطيلة، يجب إضافة JavaScript لبدء الرسم عليها.

إليك بعض الأمثلة:

رسم خط:

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>

رسم دائره

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>

رسم نص

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>

نص اوت لاين

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>

رسم تدرج لوني خطي

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

رسم تدرج لوني دائري

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

رسم صوره

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>