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