السيارات الرباعية في HTML Canvas
- الصفحة السابقة رسم Canvas
- الصفحة التالية خطوط Canvas
التوصيات للدورة
إحداثيات اللوحة
لوحة HTML هي شبكة ثنائية الأبعاد.
إحداثيات الزاوية العلوية اليسرى لللوحة هي (0,0).
يعني: بدء الرسم من الزاوية العلوية اليسرى (0,0) لرسم مستطيل ذو حجم 150x75 بكسل.
مثال على الإحداثيات
يمكنك وضع المؤشر فوق المربع أدناه لرؤية إحداثيات x و y الخاصة به:
رسم خط
لرسم خط مستقيم على اللوحة، استخدم الطريقة التالية:
- moveTo(x,y) - تحديد بداية الخط
- lineTo(x,y) - تحديد نهاية الخط
لرسم الخط فعليًا، يجب استخدام واحدة من طرق "الألوان"، مثل stroke().
مثال
تحديد نقطة البداية في موقع (0,0)، وتحديد نقطة النهاية في موقع (200,100). ثم استخدام طريقة stroke() لرسم الخط فعليًا:
const canvas = document.getElementById("myCanvas");
const 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 و y إحداثيات مركز الدائرة. يحدد المعامل r قطر الدائرة.
مثال
استخدام طريقة arc() لتحديد دائرة. ثم استخدام طريقة stroke() لرسم الدائرة فعليًا:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
يرجى الرجوع إلى:
- الصفحة السابقة رسم Canvas
- الصفحة التالية خطوط Canvas
