ملاحظات دراسة القماش: رسم مسارات بسيطة

الخطوات العامة لرسم قطع الخط:

moveTo(x,y) ينقل الفرشاة إلى نقطة الإحداثيات المحددة (x,y)

يستخدم lineTo(x,y) خطًا مستقيمًا لتوصيل نقطة النهاية الحالية ونقطة الإحداثيات المحددة (x,y)

السكتة الدماغية () ترسم المسار الحالي أو الموجود وفقًا لنمط رسم الخط الحالي

الخطوات العامة لرسم مسار مستطيل:

المستقيم (x، y، العرض، الارتفاع) مسار مستطيل، نقطة الإحداثيات (x، y)، العرض والارتفاع والعرض والارتفاع

السكتة الدماغية () أو التعبئة ترسم أو تملأ المسار وفقًا للنمط الحالي

يمكنك أيضًا استخدام StrokeRect أو fillRect المذكور أعلاه، أو لصقه في مستطيل من خلال lineTo.

دعونا نلقي نظرة أولاً على واجهة برمجة التطبيقات (API) لرسم الأقواس:

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

x، y مركز القوس، نصف قطر القوس، نقطة البداية لـ startAngle، نقطة النهاية لقوس endAngle، عكس اتجاه عقارب الساعة افتراضيًا في اتجاه عقارب الساعة، صحيح عكس اتجاه عقارب الساعة

تستخدم جميع عمليات الدوران في CSS الزوايا (درجة)، لكن الوحدة المستخدمة للتعبير عن الزوايا في دالة القوس هي الراديان، وليس الزوايا. تعبيرات JS للزوايا والراديان: الراديان = (Math.PI/180) * الزاوية (درجة).

يتم حساب الراديان هنا بناءً على الاتجاه الإيجابي للمحور السيني وزاوية الدوران في اتجاه عقارب الساعة افتراضيًا.

توضيح:

(الصورة من الصحراء)

 ctx.beginPath();ctx.arc(200, 100, 100, 0, Math.PI / 2, false);ctx. ClosePath();ctx.stroke();ctx.fill();

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.