Header Ads

استخدام وسم 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,75) .

هذا يعني بأننا نعطي أمراً بالرسم في مساحة المستطيل 150x75 داخل <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> للرسم على صفحات الانترنت و ذلك باستخدام تقنيات برمجية عادة ماتكون جافاسكربت .

يتم التشغيل بواسطة Blogger.