كanvas في HTML5

يستخدم عنصر الكانفا لرسم الرسوم على صفحة الويب.

ما هو الكانفا؟

يستخدم عنصر الكانفا في HTML5 لرسم الصور على صفحة الويب باستخدام JavaScript.

اللوحة هي منطقة مستطيلة، يمكنك التحكم في كل بكسل منها.

يملك الكانفا طرق رسم متعددة مثل الخطوط، المربعات، الدوائر، النصوص، وإضافة الصور.

إنشاء عنصر الكانفا

إضافة عنصر الكانفا إلى صفحة HTML5.

تحديد معرف العنصر وعرضه وارتفاعه:

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

الرسم من خلال JavaScript

عنصر الكانفا نفسه لا يمتلك القدرة على الرسم. جميع أعمال الرسم يجب أن تتم داخل JavaScript:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript يستخدم المعرف (id) للبحث عن عنصر الرسام الكانفا:

var c=document.getElementById("myCanvas");

ثم، أنشئ عنصر "context".

var cxt=c.getContext("2d");

يعتبر عنصر "getContext("2d")" هو عنصر مدمج في HTML5 ويقدم عدة طرق لرسم المسارات والمربعات والدوائر والكتابة وإضافة الصور.

تقوم السطور التالية برسم مربع أحمر:

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

يحول طريقة fillStyle لونه إلى الأحمر، ويحدد طريقة fillRect الشكل والوضع والحجم.

فهم الإحداثيات

يملك طريقة fillRect أعلاه معلمات (0,0,150,75).

يعني ذلك: رسم مربع ذو حجم 150x75 من اللون الأحمر من الزاوية العلوية اليسرى (0,0).

كما هو موضح في الشكل التالي، يستخدم الإحداثيات X و Y لتحديد موضع الرسم على الطلاء.

مثال على كanvas: فهم الأشكال

مثال: يمكن رؤية الإحداثيات عند وضع الفأرة على المربع

مزيد من أمثلة Canvas

هناك أمثلة أخرى للرسم على عنصر canvas:

مثال - خط

رسم خط من خلال تحديد البداية والنهاية:

مثال على كanvas: الخطوط

كود JavaScript:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>

عنصر canvas:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
لا يدعم متصفحك عنصر canvas.
</canvas>

تجربة شخصية

مثال - دائرة

رسم دائرة من خلال تحديد الحجم واللون والوضع:

مثال على كanvas: الدوائر

كود JavaScript:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>

عنصر canvas:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
لا يدعم متصفحك عنصر canvas.
</canvas>

تجربة شخصية

مثال - تدرج

استخدم اللون الذي اخترته لرسم خلفية التدرج:

مثال على كanvas: التدرج

كود JavaScript:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>

عنصر canvas:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
لا يدعم متصفحك عنصر canvas.
</canvas>

تجربة شخصية

مثال - صورة

ضع صورة على اللوحة:

مثال على كanvas: الصور

كود JavaScript:

<script>
window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("scream");
   ctx.drawImage(img, 10, 10);
};
</script>

عنصر canvas:

<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;">
لا يدعم متصفحك علامة HTML5 canvas.
</canvas>

تجربة شخصية

دليل HTML Canvas

للتعلم عن المزيد من معلومات الرسومات باللوحة، يرجى زيارة دليل HTML Canvas.

الصفحات ذات الصلة

دليل مرجع:علامة <canvas> لـ HTML5

دليل مرجع:مفهوم DOM Canvas لـ HTML