إحداثيات قماش HTML
إحداثيات قماش
لوحة HTML عبارة عن شبكة ثنائية الأبعاد.
الزاوية العلوية اليسرى من اللوحة بها الإحداثيات (0،0)
في الفصل السابق ، رأيت هذه الطريقة مستخدمة: fillRect (0،0،150،75).
هذا يعني: ابدأ من الزاوية العلوية اليسرى (0،0) وارسم مستطيلاً بحجم 150 × 75 بكسل.
مثال الإحداثيات
حرك الماوس فوق المستطيل أدناه لمعرفة إحداثياته x و y:
X
ص
ارسم خطا
لرسم خط مستقيم على قماش ، استخدم الطرق التالية:
- moveTo ( x، y ) - تحدد نقطة بداية الخط
- lineTo ( x، y ) - تحدد نقطة نهاية الخط
لرسم الخط فعليًا ، يجب عليك استخدام إحدى طرق "الحبر" ، مثل الحد ().
مثال
حدد نقطة بداية في الموضع (0،0) ، ونقطة نهاية في الموضع (200،100). ثم استخدم طريقة الحد () لرسم الخط بالفعل:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
أرسم دائرة
لرسم دائرة على قماش ، استخدم الطرق التالية:
- startPath () - يبدأ المسار
- القوس (x ، y ، r ، startangle ، endangle) - ينشئ قوسًا / منحنىًا. لإنشاء دائرة بقوس (): اضبط زاوية البداية على 0 وزاوية النهاية على 2 * Math.PI. تحدد معلمات x و y إحداثيات x و y لمركز الدائرة. تحدد المعلمة r نصف قطر الدائرة.
مثال
حدد دائرة بطريقة القوس (). ثم استخدم طريقة stroke () لرسم الدائرة فعليًا:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();