الاداءات النهائية1. تحديد المتغيرات
حدد نصف القطر، وحدد سمك الحلقة، وحدد الموضع المركزي للدائرة، وحدد لون التعبئة الافتراضي
دع نصف القطر = 75let سمك = 10letInnerRadius = نصف القطر - سمك x = 75let y = 75var Canvas = document.getElementById('tutorial');var ctx = Canvas.getContext('2d');ctx.fillStyle = #f2d7d7; 2. ارسم القوس الأول ctx.beginPath();ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI)
انتبه إلى طريقة beginPath()، وهي الخطوة الأولى في إنشاء المسار. بشكل أساسي، يتكون المسار من العديد من المسارات الفرعية، والتي توجد جميعها في قائمة، وتشكل جميع المسارات الفرعية (الخطوط والأقواس وما إلى ذلك) شكلاً. في كل مرة يتم فيها استدعاء هذه الطريقة، يتم مسح القائمة وإعادة تعيينها، ومن ثم يمكننا إعادة رسم رسم بياني جديد.
بمعنى آخر، يمكن استخدام هذه الطريقة لتجميع صور Canvas ورسم رسومات جديدة. إذا لم يتم استدعاء هذه الطريقة، فسيتم توصيل الرسومات الجديدة بالرسومات السابقة.
3. ارسم الاتصال الأولctx.quadraticCurveTo((x - نصف القطر الداخلي) - السمك / 2، y - السمك، x - نصف القطر الداخلي، y)
يتم رسم الاتصال باستخدام منحنى Bezier التربيعي. تقبل طريقة CanvasCurveTo(cp1x, cp1y, x, y) 4 معلمات، المعلمات الأولى والثانية هي نقاط التحكم، والمعلمات الثالثة والرابعة هي النهايات الوثيقة الرسمية
ما عليك سوى معرفة نقاط التحكم ونقاط النهاية لرسم قوس
4. ارسم القوس الثانيctx.arc(x, y,InnerRadius, Math.PI, Math.PI * 1.5, صحيح)
انتبه إلى المعلمة الأخيرة بعد تعيين الطريقة على "صحيح"، مما يعني الرسم عكس اتجاه عقارب الساعة (الافتراضي هو اتجاه عقارب الساعة).
5. ارسم الاتصال الثانيctx.quadraticCurveTo(y - السُمك، (x - نصف القطر الداخلي) - السُمك / 2، x، y - نصف القطر الداخلي - السُمك)
في الواقع، لا تختلف هذه الخطوة كثيرًا عن الخطوة الثالثة، لقد قمنا ببساطة بتغيير مواضع المعلمات.
6. الحشوةctx.fill();
عند هذه النقطة، يتم الانتهاء من حلقة بسيطة غير مغلقة
ارسم حلقة شريط التقدم الثانية
7. التهيئةctx.beginPath();ctx.fillStyle = #e87c7c;
beginPath يعني رسم رسم جديد، إذا لم يتم استدعاء هذه الطريقة، فسيتم ربط الرسم المرسوم لاحقًا بالرسم المرسوم مسبقًا.
8. ارسم حلقة شريط التقدم الثانيةctx.beginPath();ctx.fillStyle = #e87c7c;ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2)ctx.quadraticCurveTo((x + InternalRadius) + السمك / 2, y + سمك، x +innerRadius، y)ctx.arc(x، y،innerRadius، Math.PI * 2, Math.PI * 1.5, true)ctx.quadraticCurveTo(y - سمك, (x - نصف قطر داخلي) - سمك / 2, x, ص - نصف قطر داخلي - سمك)ctx.fill();
وبما أن طريقة الرسم هي نفس طريقة رسم الدائرة الأولى تماماً، فلا داعي لتكرارها، والفرق هو فقط قوس الدائرة.
9. تدوير القماشتحويل: تدوير (-135 درجة)؛
نظرًا لأن تدوير CSS أكثر ملاءمة ويحفظ حساب الزاوية، فإنني أستخدم تحويل CSS للتدوير. وبطبيعة الحال، يوفر Canvas أيضًا طرقًا للتدوير
رمز كامل
<!DOCTYPE html><html lang=cn><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, virtual-scale=1.0> <meta http-equiv=X-UA - المحتوى المتوافق = ie=edge> <title>canvas</title> <style> .ring { width: 150px height: 150px; flex; align-items: center; justify-content: center; حجم الخط المطلق: 30 بكسل؛ حجم الخط: غامق؛ وزن الخط: أخف } .title { اللون: أحمر؛ الموضع: مطلق } </style></head><body> <div class=ring> <canvas id=tutorial width=150 height=; 150></canvas> <span class=fraction>100 <span class=small>النقاط</span> </span> <span class=title>نقاط الخدمة</span> </div> <script> Let radius = 75 السماح بسمك = 10 السماح بنصف القطر الداخلي = نصف القطر - السماح بسمك x = 75 السماح بـ 75 var Canvas = document.getElementById('tutorial'); var ctx = Canvas.getContext('ctx.fillStyle = #f2d7d7; ctx.beginPath(); ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI) ctx.quadraticCurveTo((x -InnerRadius) - سمك/2، y - سمك، x -InnerRadius، y) ctx.arc(x, y,InnerRadius, Math.PI, Math.PI * 1.5, صحيح) ctx.quadraticCurveTo(y - السُمك، (x - نصف القطر الداخلي) - السُمك / 2، x، y - نصف القطر الداخلي - ctx.fill(); ctx.beginPath(); ctx.fillStyle = #e87c7c; ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2) ctx.quadraticCurveTo((x + نصف القطر الداخلي) + سمك / 2، ص + سمك، س + نصف القطر الداخلي، ص) ctx.arc(x, y, InternalRadius, Math.PI * 2, Math.PI * 1.5, true) ctx.quadraticCurveTo(y -سماكة, (x -InnerRadius) - سمك / 2, x, y -InnerRadius - سمك) ctx.fill(); </script></body></html>ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.