您好,登錄后才能下訂單哦!
小編給大家分享一下canvas在圓弧周圍繪制文本的方法有哪些,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
效果如下圖
第一種是直接用弧度的
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; circle={ 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)//每個(gè)字母占的弧度 var angle=parseFloat(startAngle) //轉(zhuǎn)一下數(shù)字 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.beginPath() context.translate(circle.x+Math.cos(angle)*radius,circle.y-Math.sin(angle)*radius) context.rotate(Math.PI/2-angle) //Math.PI/2為旋轉(zhuǎn)90度 Math.PI/180*X為旋轉(zhuǎn)多少度 context.fillText(character,0,0) context.strokeText(character,0,0) angle-=angleDecrement index++ context.restore() } context.restore() } context.textAlign="center" context.textBaseLine="middle" drawCircularText("clockwise around the circle",Math.PI*2,Math.PI/8) //第三個(gè)參數(shù)表示文字首位是否相接 差了多少弧度
第二種是用角度帶入的 請(qǐng)注意drawCircularText的第二個(gè)參數(shù)和第三個(gè)參數(shù)的不同
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; circle={ 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)//每個(gè)字母占的弧度 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" while(index<string.length){ character=string.charAt(index) context.save() context.beginPath() context.translate(circle.x+Math.cos((Math.PI/180)*angle)*radius,circle.y-Math.sin((Math.PI/180)*angle)*radius) context.rotate((Math.PI/2)-(Math.PI/180)*angle) //Math.PI/2為旋轉(zhuǎn)90度 Math.PI/180*X為旋轉(zhuǎn)多少度 context.fillText(character,0,0) context.strokeText(character,0,0) angle-=angleDecrement index++ context.restore() } context.restore() } context.textAlign="center" context.textBaseLine="middle" drawCircularText("clockwise around the circle",360,10) //第三個(gè)參數(shù)表示文字首位是否相接 差了多少弧度
以上是“canvas在圓弧周圍繪制文本的方法有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。