canvas是HTML5新添加的元素。這個(gè)元素負(fù)責(zé)在頁(yè)面中設(shè)定一個(gè)區(qū)域，然后通過(guò)JavaScript動(dòng)態(tài)的繪制圖形。

1.創(chuàng)建canvas元素

<canvas width="200" height="200"id="drawing"></canvas>

2.判斷瀏覽器是否支持canvas元素

indow.onload=function(){
    var drawing = document.getElementById("drawing")
    if(drawing.getContext){ //如果支持
        var context = drawing.getContext("2d")
         //取得繪圖上下文對(duì)象的引用
    }
}

3.繪制矩形

使用fillRect()方法，會(huì)填充矩形

window.onload=function(){
        var drawing = document.getElementById("drawing")
        if(drawing.getContext){
            console.log("support canvas")
            var context = drawing.getContext("2d")
            context.fillStyle = "#0000ff"
            context.fillRect(0,0,100,100)
        }
    }

使用strokeRect()方法，可以繪制邊框

context.strokeStyle = "red"
context.strokeRect(20,20,100,100)

最后使用strokeClear()方法可以清除畫(huà)布上的矩形區(qū)域

context.clearRect(30,30,100,100)

4.繪制路徑

首先調(diào)用beginPath()方法，表示要開(kāi)始繪制新路徑。然后調(diào)用以下方法繪制路徑。

繪制一條曲線：

arc(x,y,radius,radius,startAngle,endAngle,counterclockwise)

• (x,y)為圓心
• radius 半徑
• startAngle,endAngle代表起始和結(jié)束的弧度
• 最后一個(gè)參數(shù)代表是否按逆時(shí)針計(jì)算，值為false時(shí)為逆時(shí)針

arcTo(x1,y1,x2,y2,radius): 從(x1,y1)開(kāi)始繪制一條弧線到(x2,y2)為止。

bezierCurveTo(c1x,c1y,c2x,c2y,x,y): 從上一點(diǎn)開(kāi)始繪制一條曲線，到(x,y)為止，并以(c1x,c1y)(c2x,c2y)位控制點(diǎn)

lineTo(x,y): 從上一點(diǎn)開(kāi)始繪制一條直線，到(x,y)為止。

moveTo(x,y): 將繪圖游標(biāo)移動(dòng)到(x,y),不畫(huà)線

quadraticCurveTo(cx,cy,x,y): 從上一點(diǎn)繪制一條二次曲線，到(x,y)為止，并以(cx,cy)做控制點(diǎn)

rect(x,y,width,height): 從點(diǎn)(x,y)開(kāi)始繪制一個(gè)矩形，寬度和高度由width和height指定

繪制完路徑后，可以使用fill()填充當(dāng)前路徑。clip()方法在畫(huà)布上創(chuàng)建一個(gè)剪切區(qū)域。closePath()連接到路徑起點(diǎn)。stroke()對(duì)路徑進(jìn)行描邊

5.繪制文本

主要使用fillText()和strokeText()方法，都以下的3個(gè)屬性作為基礎(chǔ)

• font:文本樣式、大小及字體
• textAlign: 文本對(duì)齊方式
• textBaseline: 文本的基線

示例：

context.font = "bold 20px Arial"
context.textAlign = "center"
context.textBaseline = "middle"
context.fillText("hello",100,100)

text_center

修改 textAlign屬性為end后，

text_end

由此可見(jiàn)，textAlign控制文本在x坐標(biāo)的右邊中間還是左邊。

同理，textBaseLine屬性可以調(diào)整垂直對(duì)齊方式。

6.變換

7.繪制圖像

使用drawImage()方法繪制圖像，根據(jù)傳入?yún)?shù)的不同，可以繪制出不同的效果。

var image = document.images[0]
context.draw(image,x,y)    //圖像，起點(diǎn)
context.draw(image,x,y,width,height) //在上個(gè)函數(shù)的基礎(chǔ)上加上目標(biāo)圖像的寬度和高度
context.draw(image,x,y,width,height,x,y,width,height)
//在上個(gè)函數(shù)基礎(chǔ)上加上了源圖像的地點(diǎn)和寬度、高度

示例：

window.onload=function(){
        var drawing = document.getElementById("drawing")
        if(drawing.getContext){
            console.log("support canvas")
            var context = drawing.getContext("2d")
            var image = document.images[0];
            context.drawImage(image,0,0)
        }

結(jié)果(左側(cè)為img元素，右側(cè)為canvas)：

drawImage1

修改 drawImage函數(shù)的參數(shù)后：

context.drawImage(image,0,0,150,200)

結(jié)果：

drawImage2

可以看出已經(jīng)正常顯示了。

8.陰影

9.漸變

漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色。
以下有兩種不同的方式來(lái)設(shè)置Canvas漸變：

• createLinearGradient(x,y,x1,y1) - 創(chuàng)建線條漸變
• createRadialGradient(x,y,r,x1,y1,r1) - 創(chuàng)建一個(gè)徑向/圓漸變

當(dāng)我們使用漸變對(duì)象，必須使用兩種或兩種以上的停止顏色。
addColorStop()方法指定顏色停止，參數(shù)使用坐標(biāo)來(lái)描述，可以是0至1.
使用漸變，設(shè)置fillStyle或strokeStyle的值為 漸變，然后繪制形狀，如矩形，文本，或一條線。
——菜鳥(niǎo)教程

10.模式

利用createPattern函數(shù)可以繪制重復(fù)的圖像

var context = drawing.getContext("2d")
var image = document.images[0];
pattern = context.createPattern(image,"repeat")
context.fillStyle=pattern
context.fillRect(0,0,200,200)

結(jié)果：

createPattern

11.合成

globalAlpha     //介于0到1之間的值，全局透明度
globalCompositionOperation  //后繪制的圖形怎樣與先繪制的圖形結(jié)合

參考書(shū)《JavaScript高級(jí)程序設(shè)計(jì)》