Tutorialnya ditulis langsung dalam radian
Saya mencoba menulis ulang menggunakan sudut. Ada beberapa perbedaan. Singkatnya, lebih mudah menggunakan radian.
Terkadang saat menulis kode, Anda tidak harus mengikuti tutorial dengan tepat. Praktik terbaik memang bagus, tetapi Anda mungkin mendapatkan sesuatu dengan mencoba sesuatu yang lain, bukan?
Efeknya seperti yang ditunjukkan di bawah ini
Yang pertama adalah menggunakan radian secara langsung var kanvas=document.getElementById(kanvas) var konteks=kanvas.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 //Radius lingkaran var angleDecrement=(startAngle-endAngle )/ (string.length-1)//Busur yang ditempati setiap huruf var angle=parseFloat(startAngle) //Putar angkanya var indeks=0; konteks.simpan() konteks.fillStyle=TEXT_FILL_STYLE; konteks.strokeStyle=TEXT_STROKE_STYLE; konteks.font=TEXT_SIZE+px Lucida Sans while(indeks<string.panjang){ karakter=string.charAt(indeks) konteks.simpan() konteks. mulaiJalur() konteks.translate(circle.x+Math.cos(angle)*radius,circle.y-Math.sin(angle)*radius) konteks.rotate(Math.PI/2-angle) //Math.PI/2 adalah Putar 90 derajat Math.PI/180*X adalah berapa derajat untuk memutar konteks.fillText(karakter,0,0) konteks.strokeText(karakter,0,0) sudut-=sudutPenurunan indeks++ konteks.restore() } konteks.restore() } konteks.textAlign=pusat konteks.textBaseLine=tengah drawCircularText(searah jarum jam mengelilingi lingkaran,Math.PI*2,Math.PI/8) //Parameter ketiga mewakili posisi pertama teks Berapa radian di antara keduanya? Yang kedua dibawa berdasarkan sudut. Harap perhatikan perbedaan antara parameter kedua dan parameter ketiga drawCircularText. var kanvas=document.getElementById(kanvas) var konteks=kanvas.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 //Radius lingkaran var angleDecrement=(startAngle-endAngle )/ (string.length-1)//Busur yang ditempati setiap huruf var angle=startAngle // var indeks=0; konteks.fillStyle=TEXT_FILL_STYLE; konteks.strokeStyle=TEXT_STROKE_STYLE; konteks.font=TEXT_SIZE+px Lucida Sans while(indeks<string.length){ karakter=string.charAt(index) konteks.save() konteks.beginPath() konteks.translate(circle.x+Math.cos((Math.PI/180)*sudut)*radius,circle.y-Math.sin((Math.PI/180)*sudut)*radius) konteks.putar( (Matematika.PI/2)-(Matematika.PI/180)*sudut) //Math.PI/2 adalah putaran 90 derajat Math.PI/180*X adalah derajat putaran konteks.fillText(karakter,0,0) konteks.strokeTeks(karakter,0,0) sudut-=sudutPenurunan indeks++ konteks.restore () } konteks.restore() } konteks.textAlign=pusat konteks.textBaseLine=tengah drawCircularText(searah jarum jam mengelilingi lingkaran,360,10) //Parameter ketiga menunjukkan apakah kata-kata pertama terhubung dengan berapa banyak radian yang ada.Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.