Canvas是HTML5中新增的元素，專門用來繪制圖形，相當(dāng)于在頁面中放了一張“畫布”，可以在里面繪制圖形，但是不是指用鼠標(biāo)畫圖，而是需要用Javascript編寫需要繪制的圖形的腳本。
我們利用canvas可以繪制出下圖：
在繪制上圖之前，我們先來看下相關(guān)知識點(diǎn)：
一、 開始創(chuàng)建路徑
使用beginPath方法開始創(chuàng)建路徑。beginPath() 方法表示開始一條路徑，或重置當(dāng)前的路徑。簡單來說，其實(shí)就是告訴畫布，我要開始畫草稿了，請把之前的草稿都清除掉。
這個(gè)方法不設(shè)置參數(shù)，通過調(diào)用這個(gè)方法開始創(chuàng)建路徑，在案例中我們需要循環(huán)繪制圓形，在循環(huán)的幾次創(chuàng)建路徑的過程中，每次開始創(chuàng)建是都要調(diào)用beginPath()。
語法是：
context. beginPath ();
二、 創(chuàng)建圓形路徑
創(chuàng)建圓形路徑的時(shí)候，需要使用圖形上下文對象的arc()方法，這個(gè)方法的定義是：
arc() 方法創(chuàng)建弧/曲線(用于創(chuàng)建圓或部分圓)。
這個(gè)方法的語法是：
這個(gè)方法使用6個(gè)參數(shù)，
x為圓的中心的 x 坐標(biāo);
y為圓的中心的 y 坐標(biāo);
r為圓的半徑;sAngle為起始角，以弧度計(jì)(弧的圓形的三點(diǎn)鐘位置是 0 度);
eAngle為結(jié)束角，以弧度計(jì);
counterclockwise為規(guī)定應(yīng)該逆時(shí)針還是順時(shí)針繪圖(False = 順時(shí)針，true = 逆時(shí)針)。
arc()方法不僅可以繪制圓形，還可以繪制圓弧形，因此，必須指定起始角和結(jié)束角
三、 關(guān)閉路徑
路徑創(chuàng)建完畢后，使用圖形上下文對象的closePath()方法關(guān)閉路徑。
closePath() 方法創(chuàng)建從當(dāng)前點(diǎn)到開始點(diǎn)的路徑。
語法：
context.closePath();
關(guān)閉路徑后，路徑的創(chuàng)建工作就完成了。但是需要注意的是，這個(gè)時(shí)候只是路徑創(chuàng)建完畢而已，還沒有真正繪制任何圖形。我們接著來學(xué)習(xí)如何設(shè)置繪制樣式和填充當(dāng)前路徑。
四、 設(shè)置繪制樣式
設(shè)置繪制樣式，需要使用fillStyle。fillStyle 屬性設(shè)置或返回用于填充繪畫的顏色、漸變或模式。
語法：context.fillStyle=color|gradient|pattern;
color：指示繪圖填充色的 CSS 顏色值。默認(rèn)值是 #000000;
gradient：用于填充繪圖的漸變對象(線性或放射性);
pattern：用于填充繪圖的 pattern 對象。
這里我們需要使用fillStyle來設(shè)置顏色。
五、 填充圖形
我們需要使用fill()方法來填充已經(jīng)設(shè)置好的圓形。
fill() 方法填充當(dāng)前的圖像(路徑)。默認(rèn)顏色是黑色。
語法：
context.fill();
六、 利用上面學(xué)會的內(nèi)容我們先來繪制一個(gè)圓形
我們在寬500像素，高500像素，邊框是1像素黑色實(shí)線的畫布中，繪制一個(gè)圓心在x軸25像素，y軸25像素，半徑是10像素，起始角是0，結(jié)束角是2*PI，逆時(shí)針，填充顏色是半透明的綠色的圓形。
具體代碼如下：
>?
<html>?
<head>?
<meta?charset="UTF-8">?
<title>使用canvas繪制圓形title>?
<style>?
????????#canvas{?
????????????border:1px?solid?#000;?
????????}?
style>?
head>?
<body>?
<canvas?width="500"?height="500"?id="canvas">canvas>?
<script>?
varmyCanva??=?document.getElementById("canvas");?
varctx?=?myCanva.getContext("2d");?
????????ctx.beginPath();?
????????ctx.arc(25,?25,?10,?0,?Math.PI?*?2,?true);?
????????ctx.closePath();?
ctx.fillStyle?=?'rgba(0,255,0,0.25)';?
????????ctx.fill();?
script>?
body>?
html>?
七、 繪制文中一開始提到的圖，只需要加一個(gè)循環(huán)就可以實(shí)現(xiàn)了。
具體代碼如下：
>?
<html>?
<head>?
<meta?charset="UTF-8">?
<title>使用canvas繪制圓形title>?
<style>?
????????#canvas{?
????????????border:1px?solid?#000;?
????????}?
style>?
head>?
<body>?
<canvas?width="500"?height="500"?id="canvas">canvas>?
<script>?
varmyCanva??=?document.getElementById("canvas");?
varctx?=?myCanva.getContext("2d");?
for(vari?=?0;?i?<?10;?i++){?
????????????ctx.beginPath();?
????????????ctx.arc(i?*?25,?i?*?25,?i?*?10,?0,?Math.PI?*?2,?true);?
????????????ctx.closePath();?
ctx.fillStyle?=?'rgba(0,255,0,0.25)';?
????????????ctx.fill();?
????????}?
script>?
body>?
html>?
這段代碼運(yùn)行的結(jié)果如下圖：
想要了解更多web前端知識，可以關(guān)注優(yōu)就業(yè)官網(wǎng)（www.ujiuye.com）
