HTML5 قماش

 <canvas id = عرض mycanvas = 400 ارتفاع = 200>

تعرض القماش الافتراضي <canvas> مستطيلًا فارغًا بلا حدود على الصفحة. من أجل جعلها تعرض الكفاف ، أضف إطارًا منقطًا إليه من خلال تحديد قواعد النمط:

 قماش {الحدود: 1 بكسل متقطع أسود ؛}

لإكمال مهمة الرسم ، أولاً وقبل كل شيء ، يتعين علينا الحصول على كائن <canvas> ، ثم الحصول على سياق الرسم ذو الأبعاد.

يتم الحصول على مظاهرة العينة التالية من خلال رسم الرسم عند تحميل الصفحة:

 <script> window.onload = function () {var canvas = document.getElementById (mycanvas) ؛

(1) نقطة البداية هي (50،50) أدناه (50،50) ، ونقطة النهاية هي (150،150) خطوط مستقيمة

 Context.Moveto (50 ، 50) ؛

(2) اضبط عرض ولون الخطوط بسمات الخط والضرب

 // line width context.LineWidth = 10 ؛ 50) ؛

(3) اضبط شكل كلا طرفي الخط (نوع رأس الخط) باستخدام خاصية LinEcap:

1. بعقب: فانغتو (القيمة الافتراضية)
2. جولة: رأس مستدير
3. مربع: تمديد رأس مربع (التأثير مشابه لعقب ، لكن طول الخطين من الخط سيزيد من طول نصف عرض الخط)

 var canvas. Side مزق السياق (50 ، 50) ؛ ؛ context.linecap = Square ؛

يمكن أن يرى المثال أعلاه أنه في كل مرة يتم فيها رسم قطاع الخط الجديد ، يتم استدعاء طريقة BeginPath ().

بدون هذه الخطوة ، في كل مرة تقوم فيها بالاتصال بالسكتة الدماغية () ، ستقوم بإعادة تشغيل الجزء الأصلي على القماش. مثل المثال أعلاه ، يجب تعديل سمات السياق عند رسم خط جديد.