JavaScript學習筆記（canvas繪圖）

canvas繪圖分爲2d繪圖和3d繪圖(WebGL)，本篇主要梳理一下2d繪圖相關的知識

1.canvas繪圖依賴<canvas>標籤作爲畫布

<canvas id="drawing" width=" 200" height="200">您的瀏覽器不支持canvas繪圖功能</canvas> 

可以在元素上添加widht,height屬性，也可以通過css添加樣式
如果瀏覽去不支持canvas標籤，就會顯示標籤裏面的內容

2.要在canvas畫布上繪圖，首先要取得2d繪圖上下文對象，通過調用getContext()方法，傳入2d

var drawing = document.getElementById('drawing');
if(drawing.getContext){
	var context = drawing.getContext('2d');
}

先判斷元素上是否有getContext方法，確定瀏覽器是否支持canvas繪圖，因爲有的瀏覽器不支持canvas標籤會用其他標籤代替，不會報錯，所以要通過getContext方法判斷

3.canvas2d繪圖,就有兩種繪圖方式，描邊(畫線)和填充

繪製圖形樣式設置

• fillStyle 填充他圖形顏色,支持css各種格式顏色值
• strokeStyle 描邊線條顏色，支持css各種格式顏色值
• lineWidth 描邊線條粗細，默認單位px
• lineCap描邊線條末端樣式（butt平頭round圓頭square方頭）
• lineJoin描邊線條連接處樣式（round圓角bevel斜角平頭miter直角斜接

繪製矩形
矩形是唯一可以直接繪製的圖形（其他圖形要先繪製路線，再繪製）

//繪製描邊矩形
context.strokeStyle(color);
context.strokeRect(x,y,width,height);

//繪製填充矩形
context.fillStyle(color);
context.fillRect(x,y,width,height);

//剪切矩形區域
context.clearRect(x,y,width,height)

繪製路徑

• 繪製前

繪製路徑必須以beginPath()開頭,表示要開始繪製

context.beginPath();

• 繪製中

繪製路徑有以下用到的方法

• moveTo(x, y)將繪製起點移動到x,y位置
• lineTo(x，y)從上一個點繪製直線到x,y位置
• closePath()閉合路徑
• arc(x, y, R, startAngle, endAngle, false)繪製圓弧
• rect(x,y,width,height)繪製就行

• 繪製結束

繪製路徑結束可以進行以下幾個操作

• stroke()對路徑描邊
• fill()對路徑填充
• clip()對路徑裁剪

//繪製圓
context.beginPath();
context.arc(110,200,50,0,2*Math.PI,false)
context.stroke();
//繪製矩形
context.beginPath();
context.rect(200,200,50,50)
context.stroke();

//繪製三角形
context.moveTo(10, 150);
context.lineTo(110,150);
context.lineTo(110,200);
context.closePath();

變換方法

• translate(x,y) 把原點設置到x,y位置
• rotate()旋轉，傳入弧度數
• scale(x,y)縮放

無論變換還是設置其他屬性，都會在上下文中一直有效，如果只想在繪製某個圖形時使用一組屬性，canvas提供了save()和restore()方法，用於保存狀態和狀態回退，支持保存多個狀態和多層回退

繪製文本
設置文本樣式

• font(bold 10px Arial)設置文本格式
• textAlign()設置文本對齊方式 start/center/end
• textBaseline指定文本基線

繪製文本有兩個方法

• fillText(text,x,y)繪製填充文本
• strokeText(text,x,y) 繪製描邊文本

context.font = 'bold 20px Arial'//文本樣式/大小/字體
context.align = 'center';//對齊方式
context.textBaseline = "middle";//文本基線
context.fillText("繪製的文本", 100, 300);
context.strokeText("繪製的文本", 200, 300);