رسم على قماش اللوحة وجافا سكريبت
جميع الاستفادة من يجب أن يتم ذلك مع جافا سكريبت قماش HTML:
مثال
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
انها محاولة لنفسك » الخطوة 1: العثور على العنصر قماش
أولا وقبل كل شيء، يجب أن تجد <canvas> العنصر.
ويتم ذلك عن طريق استخدام طريقة HTML DOM getElementById() :
var canvas = document.getElementById("myCanvas");
الخطوة 2: إنشاء كائن رسومي
ثانيا، تحتاج إلى كائن رسومي للقماش.
و getContext() هو المدمج في وجوه HTML، مع خصائص وأساليب الرسم:
var ctx = canvas.getContext("2d");
الخطوة 3: رسم على قماش
وأخيرا، يمكنك رسم على القماش.
تعيين نمط تعبئة الكائن الرسومي إلى اللون الأحمر:
ctx.fillStyle = "#FF0000";الخاصية نمط ملء يمكن أن يكون لون CSS، التدرج، أو نمط. الافتراضي نمط ملء باللون الأسود.
و fillRect( x,y,width,height ) يرسم طريقة مستطيل، مليئة نمط التعبئة، على قماش:
ctx.fillRect(0,0,150,75);