Canvas في HTML5

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

ما هو Canvas؟

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

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

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

إنشاء عنصر Canvas

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

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

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

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

عنصر canvas نفسه لا يمتلك القدرة على الرسم. جميع أعمال الرسم يجب أن تتم داخل 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 للبحث عن عنصر canvas:

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 لتحديد موضع الرسم على الورق.

مثال على Canvas: فهم الإحداثيات

مثال: يمكن رؤية الإحداثيات عند وضع الماوس فوق المثلث

أمثلة أكثر على Canvas

فيما يلي المزيد من الأمثلة على الرسم على عنصر canvas:

مثال - خط

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

مثال على Canvas: الخطوط

كود 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>

تجربة شخصية

مثال - دائرة

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

مثال على Canvas: الدوائر

كود 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>

تجربة شخصية

مثال - تدرج

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

مثال على Canvas: التدرج

كود 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>

تجربة شخصية

مثال - صورة

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

مثال على Canvas: الصور

كود 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