canvas是基于狀態(tài)進(jìn)行繪制的。在真正繪制（比如調(diào)用fill, stroke）之前，對(duì)畫布的設(shè)置都是對(duì)畫布狀態(tài)的設(shè)置

// 獲取頁(yè)面中的canvas元素
var canvas = document.getElementById('#myCanvas');

// 設(shè)置畫布大小
canvas.width = 800;
canvas.height = 800;

// 創(chuàng)建一個(gè)2d的context
var ctx = canvas.getContext('2d');

// 設(shè)置線的寬度
ctx.lineWidth = 10;

方法

beginPath()

開始一段全新的路徑，如果沒(méi)有beginPath()則相當(dāng)于連續(xù)的狀態(tài).比如想要給2條折線添加不同的顏色

不使用beginPath的情況：（失敗， 最終結(jié)果均為blue）

// 第一段折線
ctx.moveTo(100, 200)
ctx.lineTo(300, 400)
ctx.lineTo(100, 600)
ctx.strokeStyle = 'black'
ctx.stroke()

// 第二段折線
ctx.moveTo(300, 200)
ctx.lineTo(500, 400)
ctx.lineTo(300, 600)
ctx.strokeStyle = "blue"
ctx.stroke()

使用beginPath,相當(dāng)于每次都重新開始一段路勁：（成功）

// 第一段折線
ctx.beginPath()  // 開始這個(gè)可以省略
ctx.moveTo(100, 200) // 可以替換成ctx.lineTo(100， 200)， 結(jié)果一致
ctx.lineTo(300, 400)
ctx.lineTo(100, 600)
ctx.strokeStyle = 'black'
ctx.stroke()

// 第二段折線
ctx.beginPath()
ctx.moveTo(300, 200)
ctx.lineTo(500, 400)
ctx.lineTo(300, 600)
ctx.strokeStyle = "blue"
ctx.stroke()    

• moveTo(): 表示不從任何點(diǎn)開始，重新指定一個(gè)新的坐標(biāo)點(diǎn)
• lineTo(): 表示從上一個(gè)點(diǎn)到另一個(gè)點(diǎn)
• beginPath() : 會(huì)清空坐標(biāo)點(diǎn)，清空不是指還原到（0， 0）坐標(biāo)點(diǎn)，而是沒(méi)有，beginPath() + lineTo() 相當(dāng)于一次 moveTo()

closePath()

這個(gè)和上面的 beginPath() 成對(duì)使用， 用于繪制封閉的多邊形

比如繪制一個(gè)箭頭：

ctx.beginPath()
ctx.moveTo(100, 350)
ctx.lineTo(500, 350)
ctx.lineTo(500, 200)
ctx.lineTo(700, 400)
ctx.lineTo(500, 600)
ctx.lineTo(500, 450)
ctx.lineTo(100, 450)
ctx.closePath()

ctx.strokeStyle = '#056'
ctx.stroke()

對(duì)于封閉圖形進(jìn)行填充 fill()

在上面代碼的基礎(chǔ)上，添加填充色：

# 狀態(tài)的描述
ctx.fillStyle = 'orangered'
ctx.strokeStyle = '#056'

# 真正的繪制過(guò)程
ctx.fill()
ctx.stroke()

值得注意的是，上面的 fill() 和 stroke() 執(zhí)行的先后順序，對(duì)繪制的結(jié)果是不一樣的，這需要注意!!!

繪制矩形 fillRect() strokeRect()

通過(guò)上面的學(xué)習(xí)，我們可以進(jìn)行以下封裝來(lái)寫個(gè)函數(shù)用來(lái)繪制矩形：

/*
 * @param ctx: canvas context
 * @param x, y: 起點(diǎn)坐標(biāo)
 * @param width, height: 矩形寬高
 * @param borderWidth: 描邊寬度
 * @param borderColor: 描邊顏色
 * @param fillColor: 填充顏色
 */
function drawRect(ctx, x, y, width, height, borderWidth, borderColor, fillColor) {
  ctx.lineWidth = borderWidth();
  
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + width, y);
  ctx.lineTo(x + width, y + height);
  ctx.lineTo(x, y + heigth);
  ctx.closePath()

  ctx.fillStyle = fillColor;
  ctx.strokeStyle = borderColor;

  ctx.fill();
  ctx.stroke();
}

// 繪制
drawRect(ctx, 100, 100, 200, 200, 10, 'green', 'red');

但是實(shí)際上，canvas本身就提供了矩形的繪制方法：

fillRect(x, y, width, height) 和 strokeRect(x, y, width, height)

上面的方法可以重構(gòu)為：

function drawRect(ctx, x, y, width, height, borderWidth, borderColor, fillColor) {
  ctx.lineWidth = borderWidth();
  ctx.fillStyle = fillColor;
  ctx.strokeStyle = borderColor;  

  ctx.fillRect(x, y, width, height);
  ctx.strokeRect(x, y, width, height);
}

// 繪制一個(gè)填充為半透明的矩形
drawRect(200, 200, 200, 200, 10, 'green', 'rgba(0, 123, 12, 0.5)');

總結(jié)

學(xué)習(xí)了一些基本的方法和屬性：

• moveTo()
• lineTo()
• beginPath(), closePath()
• strokeStyle, fillStyle 的基本用法
• lineWidth: 線條的寬度
• fill(), stroke()
• 矩形的基本繪制： fillRect(x, y, width, height), strokeRect(x, y, width, height)