استخدام وسم canvas مع HTML5

يستخدم العنصر <canvas> للرسم الفوتوغرافي على صفحات الانترنت .

تعريف عنصر <canvas>

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

إنشاء Canvas

يتم إنشاء مساحة للعنصر canvas من خلال إضافة الوسم <canvas> . كما يمكن أيضاً تحديد الطول و العرض كما في المثال التالي :

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

اكتب الكود بنفسك

الرسم من خلال الجافاسكربت

لايحمل العنصر <canvas> خاصية الرسم من تلقاء نفسه . كما أن جميع عمليات الرسم يجب أن تكون ضمن كود الجافاسكربت JavaScript :

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

اكتب الكود بنفسك

تستخدم الجافاسكربت الاي دي id و ذلك للمطابقة مع العنصر <canvas> :

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

ثم إنشاء كائن :

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

يعتبر الكائن getContext("2d") مبنياً من أصل لغة HTML5 مع العديد من الطرق لرسم الخطوط و الدوائر و الصور و الكثير .

ثم نقوم برسم مستطيل أزرق داخل مساحة العمل <canvas> :

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

تقوم الطريقة fillStyle بتعبئة التصميم باللون الأزرق كما تقوم الطريقةfillRect بتحديد الشكل و المكان و أيضاً الحجم .

فهم طريقة عمل الاحدائيات

تحتوي الطريقة fillRect في المثال السابق على مجموعة قيم بداخلها (0,0,150,755) .

هذا يعني بأننا نعطي أمراً بالرسم في مساحة المستطيل 150×75 داخل <canvas> وذلك بداية من النقطة الزاوية العليا اليسرى للمستطيل وإحداثياته (0,0) .

بعض الأمثلة حول <canvas>

سنقوم بشرح بعض الأمثلة المتعلقة بطريقة الرسم داخل <canvas> :

مثال 1 : رسم خط

سنقوم برسم خط داخل العمل و ذلك بتحديد نقطة البداية و نقطة الانتهاء أو التوقف :

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
متصفحك لايدعم خاصية الرسم داخل كانفاس
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(10,10);
ctx.lineTo(150,50);
ctx.lineTo(10,50);
ctx.stroke();

</script>

اكتب الكود بنفسك

مثال 2 : رسم دائرة

سنقوم برسم دائرة و ذلك بتحديد الحجم و اللون و المكان :

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.</canvas>
<script type="text/javascript">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.beginPath();
ctx.arc(70,18,15,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();

</script>

اكتب الكود بنفسك

مثال 3 : رسم تدرج ظل

رسم خلفية متدرجة الظل و ذلك بتحديد اللون الذي تريد

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.

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

</script>

اكتب الكود بنفسك

العناصر الجديدة

الوسم	الشرح
<canvas>	يستخدم الوسم <canvas> للرسم على صفحات الانترنت و ذلك باستخدام تقنيات برمجية عادة ماتكون جافاسكربت .