شرح تفصيلي لطريقتين لرسم نص حول قوس في القماش

تتم كتابة البرنامج التعليمي مباشرة بالراديان

حاولت إعادة كتابتها باستخدام الزوايا. هناك بعض الاختلافات، باختصار، من الأفضل استخدام الراديان. بالطبع، يمكنك تحديد أيهما أسهل في الفهم.

في بعض الأحيان، عند كتابة التعليمات البرمجية، لا يتعين عليك اتباع البرامج التعليمية بالضبط. أفضل الممارسات جيدة، ولكن قد تكسب شيئًا ما من خلال تجربة شيء آخر، أليس كذلك؟

التأثير كما هو موضح أدناه

 var Canvas=document.getElementById(canvas) var context=canvas.getContext(2d) var TEXT_FILL_STYLE=rgba(100,130,240,0.5) var TEXT_STROKE_STYLE=rgba(200,0,0,0.7) var TEXT_SIZE=64; x:canvas.width/2, y:canvas.height/2, radius:200 } function drawCircularText(string,startAngle,endAngle){ var radius=circle.radius // نصف قطر الدائرة var angleDecrement=(startAngle-endAngle )/ (string.length-1)// القوس الذي يشغله كل حرف var angle=parseFloat(startAngle) // اقلب الرقم var Index=0 var Character; context.save() context.fillStyle=TEXT_FILL_STYLE; context.strokeStyle=TEXT_STROKE_STYLE; context.font=TEXT_SIZE+px Lucida Sans while(index<string.length){ Character=string.charAt(index) context.save() context. يبدأ المسار () context.translate(circle.x+Math.cos(angle)*radius,circle.y-Math.sin(angle)*radius) context.rotate(Math.PI/2-angle) //Math.PI/2 هو التدوير بمقدار 90 درجة Math.PI/180*X هو عدد الدرجات التي يمكن تدويرها context.fillText(character,0,0) context.strokeText(character,0,0) angle-=angleDecrement Index++ context.restore() } context.restore() } context.textAlign=center context.textBaseLine=middle drawCircularText(في اتجاه عقارب الساعة حول الدائرة,Math.PI*2,Math.PI/8) // تمثل المعلمة الثالثة الموضع الأول النص كم عدد الراديان الموجود بين الاثنين؟

 var Canvas=document.getElementById(canvas) var context=canvas.getContext(2d) var TEXT_FILL_STYLE=rgba(100,130,240,0.5) var TEXT_STROKE_STYLE=rgba(200,0,0,0.7) var TEXT_SIZE=64; x:canvas.width/2, y:canvas.height/2, radius:200 } function drawCircularText(string,startAngle,endAngle){ var radius=circle.radius // نصف قطر الدائرة var angleDecrement=(startAngle-endAngle )/ (string.length-1)// القوس الذي يشغله كل حرف var angle=startAngle // var Index=0; context.fillStyle=TEXT_FILL_STYLE; context.strokeStyle=TEXT_STROKE_STYLE; context.font=TEXT_SIZE+px Lucida Sans while(index<string.length){ Character=string.charAt(index) context.save() context.beginPath() context.translate(circle.x+Math.cos((Math.PI/180)*زاوية)*نصف القطر,circle.y-Math.sin((Math.PI/180)*زاوية)*نصف القطر) context.rotate( (Math.PI/2)-(Math.PI/180)*الزاوية) // Math.PI/2 هي درجة الدوران Math.PI/180*X هي درجة الدوران context.fillText(character,0,0) context.strokeText(character,0,0) angle-=angleDecrement Index++ context.restore () } context.restore() } context.textAlign=center context.textBaseLine=middle drawCircularText(في اتجاه عقارب الساعة حول الدائرة,360,10) // تشير المعلمة الثالثة إلى ما إذا كان النص الأول متصلاً بعدد الراديان الموجود.

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