คำอธิบายโดยละเอียดของสองวิธีในการวาดข้อความรอบส่วนโค้งบนผืนผ้าใบ

บทช่วยสอนนี้เขียนเป็นเรเดียนโดยตรง

ฉันพยายามเขียนใหม่โดยใช้มุม โดยสรุป การใช้เรเดียนจะสะดวกกว่า แน่นอนว่าคุณสามารถเลือกได้ว่าอันไหนเข้าใจง่ายกว่า

บางครั้งเมื่อเขียนโค้ด คุณไม่จำเป็นต้องปฏิบัติตามบทช่วยสอนอย่างถูกต้องแม่นยำ แต่คุณอาจได้รับบางอย่างจากการลองอย่างอื่นใช่ไหม

เอฟเฟกต์ดังที่แสดงด้านล่าง

 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, รัศมี:200 } ฟังก์ชัน DrawCircularText(string,startAngle,endAngle){ var radius=circle.radius //รัศมีของวงกลม var angleDecreat=(startAngle-endAngle )/ (string.length-1)//ส่วนโค้งที่ถูกครอบครองโดยตัวอักษรแต่ละตัว var angle=parseFloat(startAngle) //หมุนตัวเลข var index=0; 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.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-=angleDecreatindex++ 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, รัศมี:200 } ฟังก์ชัน DrawCircularText(string,startAngle,endAngle){ var radius=circle.radius //รัศมีของวงกลม var angleDecreat=(startAngle-endAngle )/ (string.length-1)//ส่วนโค้งที่ถูกครอบครองโดยตัวอักษรแต่ละตัว var angle=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 ในขณะที่ (ดัชนี <string.length){ character=string.charAt(ดัชนี) 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 คือการหมุน 90 องศา Math.PI/180*X คือระดับของการหมุน บริบท fillText(อักขระ,0,0) context. strokeText(อักขระ,0,0) angle-=angleDecreation index++ context.restore () } context.restore() } context.textAlign=center context.textBaseLine=middle DrawCircularText (ตามเข็มนาฬิการอบวงกลม,360,10) //พารามิเตอร์ตัวที่สามระบุว่าคำแรกเชื่อมต่อกันด้วยจำนวนเรเดียนที่มีอยู่หรือไม่

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network