キャンバス内の円弧の周囲にテキストを描画する 2 つの方法の詳細な説明

チュートリアルはラジアンで直接書かれています

角度を使って書き直してみました。いくつかの違いがあります。もちろん、ラジアンを使用した方が分かりやすいです。

コードを書くとき、ベスト プラクティスに正確に従う必要はない場合もありますが、他のことを試してみると何かが得られるかもしれません。

効果は以下の通りです

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 } functiondrawCircularText(string,startAngle,endAngle){ var radius=circle.radius //円の半径 var angleDecrement=(startAngle-endAngle) )/ (string.length-1)//各文字が占める円弧 var angle=parseFloat(startAngle) //数値を回転します varindex=0; context.save() context.fillStyle=TEXT_FILL_STYLE; context.drawingStyle=TEXT_STROKE_STYLE; context.font=TEXT_SIZE+px Lucida Sans while(index<string.length){character=string.charAt(index) context.save() beginPath() 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.drawingText(character,0,0) angle-=angleDecrementindex++ context.restore() } context.restore() } context.textAlign=center context.textBaseLine=middledrawCircularText(円を時計回りに,Math.PI*2,Math.PI/8) //3 番目のパラメータは最初の位置を表しますテキストの 2 つの間のラジアンは何ラジアンですか?

 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 } functiondrawCircularText(string,startAngle,endAngle){ var radius=circle.radius //円の半径 var angleDecrement=(startAngle-endAngle) )/ (string.length-1)//各文字が占める円弧 var angle=startAngle // varindex=0; var context.save(); context.fillStyle=TEXT_FILL_STYLE; context.drawingStyle=TEXT_STROKE_STYLE; context.font=TEXT_SIZE+px Lucida Sans while(index<string.length){character=string.charAt(index) 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 は回転の角度です context.fillText(character,0,0) context.bloodText(character,0,0) angle-=angleDecrementindex++ context.restore () } context.restore() } context.textAlign=center context.textBaseLine=middledrawCircularText(円を時計回りに,360,10) // 3 番目のパラメータは、最初のテキストがラジアン数で接続されているかどうかを示します。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。