مختصات کانواس HTML
- صفحه قبل ترسیم کانواس
- صفحه بعدی خط کانواس
محددات اللوحة
لوحة HTML هي شبكة ثنائية الأبعاد.
موقع الزاوية العلوية اليسرى لللوحة هو (0,0).
في الفصل السابق، استخدمنا الطريقة: fillRect(0,0,150,75).
يعني: بدء الرسم من الزاوية العلوية اليسرى (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 يعرفان مركز الدائرة في 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();
لطفاً به: مراجعه کنید
- صفحه قبل ترسیم کانواس
- صفحه بعدی خط کانواس
