詳解canvas在圓弧周圍繪制文本的兩種寫法
發(fā)布時(shí)間：2018-05-22 16:57:03 作者：Gipsy_Danger 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了詳解canvas在圓弧周圍繪制文本的兩種寫法，直接按弧度進(jìn)行編寫的，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
教程是直接按弧度進(jìn)行編寫的
自己又試著用角度重新編寫了一份，有些差別，總結(jié)起來(lái)還是用弧度比較方便，當(dāng)然兩種哪種理解的容易可以自行斟酌
寫代碼有時(shí)候不一定要按照教程一板一眼的寫，最佳實(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=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ù)表示文字首位是否相接 差了多少弧度
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了HTML5 Canvas中使用用路徑描畫圓弧,本文演示了如何在HTML5 Canvas中畫一個(gè)完整的圓、半圓、圓弧,需要的朋友可以參考下2015-01-01