HTML قماش الاحداثيات

قماش الاحداثيات

قماش HTML من شبكة ثنائية الأبعاد.

الزاوية العلوية اليسرى من اللوحة لديه الإحداثيات (0,0)

في الفصل السابق، أنك رأيت هذه الطريقة المستخدمة: fillRect(0,0,150,75) .

وهذا يعني: تبدأ في الزاوية العلوية اليسرى (0,0) ورسم مستطيل 150x75 بكسل.

الماوس فوق المستطيل أدناه لمعرفة لها إحداثيات س وص:

لرسم خط مستقيم على قماش، واستخدام الأساليب التالية:

رسم الواقع الخط، يجب عليك استخدام واحدة من "ink" الأساليب، مثل stroke() .

تحديد نقطة الانطلاق في موقف (0,0) ، ونقطة النهاية في موقف (200,100) . ثم استخدم stroke() طريقة رسم الواقع السطر:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

رسم دائرة على قماش، واستخدام الأساليب التالية:

beginPath() - يبدأ مسار
arc(x,y,r,startangle,endangle) - يخلق قوس / منحنى. لإنشاء دائرة مع arc() : تعيين بدء زاوية 0 وزاوية حد ل2 * Math.PI. x و المعلمات ص تحدد X- وإحداثيات ص من مركز الدائرة. تحدد المعلمة ص نصف قطر الدائرة.

تحديد دائرة مع arc() الأسلوب. ثم استخدم stroke() طريقة رسم الواقع الدائرة:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();