您好,登錄后才能下訂單哦!
這篇文章主要介紹用canvas來繪制弧線和圓的方法,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
html文件如下所示:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>Canvas繪制弧線和圓</title></head><body><style> #canvas{ border: 1px solid #aaa; text-align: center; }</style><canvas id="canvas" width="800" height="800"> 當(dāng)用戶瀏覽器不支持Canvas,請(qǐng)更換瀏覽器重試!</canvas></body></html>
繪制弧線或圓需要使用arc方法,首先,讓我們了解一下這個(gè)方法:
context.arc( x,y,r,sAngle,eAngle,counterclockwise);
該方法共有6個(gè)參數(shù):
x :圓心x軸坐標(biāo)
y:圓心y軸坐標(biāo)
r:半徑
sAngle:弧線起始位置
eAngle:弧線終止位置
counterclockwise:可選參數(shù),默認(rèn)為false,規(guī)定應(yīng)該逆時(shí)針還是順時(shí)針繪圖。false = 順時(shí)針,true = 逆時(shí)針。
首先,讓我們開始繪制一條弧線,代碼如下:
var canvas=document.getElementById("canvas");var context=canvas.getContext("2d"); context.lineWidth=5; context.strokeStyle="blue"context.arc(300,300,200,0,2*Math.PI); context.stroke();//畫一個(gè)空心弧線 context.fillStyle="red" context.fill();//收尾直接相連為一個(gè)封閉圖形,以紅色填充該圖形
繪制了一個(gè)弧線之后,讓我們嘗試?yán)L制多個(gè)弧線,以致為一個(gè)圓,直接上代碼:
window.onload= function () { var canvas=document.getElementById("canvas"); if(canvas.getContext("2d")){ var context=canvas.getContext("2d"); context.lineWidth=5; context.strokeStyle="red"; for(var i=0;i<10;i++){//繪制十個(gè)弧線,收尾封閉,沒有填充色 context.beginPath(); context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10); context.closePath();//使弧線封閉,形成一個(gè)閉合圖形 context.stroke(); } for(var i=0;i<10;i++){//繪制十個(gè)弧線,收尾不封閉,沒有填充色 context.beginPath(); context.arc(50+i*100,180,40,0,2*Math.PI*(i+1)/10); context.stroke(); } for(var i=0;i<10;i++){//繪制十個(gè)弧線,收尾封閉且填充為默認(rèn)色 context.beginPath(); context.arc(50+i*100,300,40,0,2*Math.PI*(i+1)/10,true);//逆時(shí)針繪制 context.fill(); } }else { alert("不支持canvas,請(qǐng)更換瀏覽器!") } };
以上是用canvas來繪制弧線和圓的方法的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。