基本用法
canvas元素
<canvas id="canvas" width="400" height="400"></canvas>
獲取繪圖功能對象
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas繪圖方法
context.fill() // 填充
context.stroke() // 描邊
context.fillStyle = " " // 填充顏色
context.strokeStyle = " " // 邊框顏色
context.lineWidth = xx // 邊框?qū)挾?/p>
context.fillRect(x,y,width,height) // 繪制一個(gè)填充矩形
context.strokeRect(x,y,width,height) // 繪制一個(gè)描邊矩形
context.clearRect(x,y,width,height) // 清除矩形區(qū)域
context.arc(x,y,radius,starAngle,endAngle,anticlockwise)
// 繪制圓或圓弧
// anticlockwise 逆時(shí)針方向
// 角度－弧度轉(zhuǎn)換
function getRads (degrees) {
return (Math.PI * degrees) / 180;
}
// 弧度－角度轉(zhuǎn)換
function getDegrees (rads) {
return (rads * 180) / Math.PI;
}
context.beginPath() // 開啟新路徑
context.closePath() // 關(guān)閉路徑
context.moveTo(x,y)
context.lineTo(x,y) // 繪制線段
漸變
線性漸變
var lg = context.createLinearGradient(xStart,yStart,xEnd,yEnd);
lg.addColorStop(offset,color); // offset:設(shè)定的顏色離漸變結(jié)束點(diǎn)的偏移量(0~1)
徑向漸變
var rg = context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);
rg.addColorStop(offset,color);
陰影
context.shadowOffsetX = num; // 陰影的橫向位移婆翔，默認(rèn)0
context.shadowOffsetY = num; // 陰影的縱向位移掏婶，默認(rèn)0
context.shadowColor = 'color'; // 陰影的顏色
context.shadowBlur = num; // 陰影的模糊范圍（值越大越模糊）
繪制圖像
繪圖
context.drawImage(image,x,y);
// Image對象
// 繪制圖像的x坐標(biāo)
// 繪制圖像的y坐標(biāo)
context.drawImage(image,x,y,w,h);
// Image對象
// 繪制圖像的x坐標(biāo)
// 繪制圖像的y坐標(biāo)
// 繪制圖像的寬度
// 繪制圖像的高度
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh); *選取圖像的一部分矩形區(qū)域進(jìn)行繪制
// Image對象
// 圖像上的x坐標(biāo)
// 圖像上的y坐標(biāo)
// 矩形區(qū)域的寬度
// 矩形區(qū)域的高度
// 畫在canvas的x坐標(biāo)
// 畫在canvas的y坐標(biāo)
// 畫出來的寬度
// 畫出來的高度
圖像平鋪
context.createPattern(image,type);
// type: no-repeat 不平鋪 repeat-x 橫向平鋪 repeat-y 縱向平鋪 repeat 全部平鋪
圖像裁剪
context.clip();
// 只繪制封閉路徑區(qū)域內(nèi)的圖像
// 用法：先創(chuàng)建裁剪區(qū)域，再繪制圖像
注意：之后繪制的圖形都會采用這個(gè)裁剪區(qū)域最蕾，要取消這個(gè)裁剪區(qū)域就需要用到保存恢復(fù)狀態(tài)
繪制文字
context.fellText(text, x, y [, maxWidth]); // 填充文字
context.strokeText(text, x, y [, maxWidth]); // 描邊文字
// 要繪制的文字
// 文字起點(diǎn)的x坐標(biāo)
// 文字起點(diǎn)的y坐標(biāo)
// 繪制的最大寬度（可選）
context.font = "是否加粗 字號 字體"; // 設(shè)置文字樣式老厌，默認(rèn)10px sans-serif
context.textAlign = " "; // 水平對齊方式 （start/end/right/center）
context.textBaseline = " "; // 垂直對齊方式 （top、hanging梅桩、middle拜隧、alphabetic、ideographic洪添、bottom）
var text = context.measureText(text); // TextMetrics object
text.width; // 得到字體寬度（像素）
保存和恢復(fù)狀態(tài)
context.save(); // 保存當(dāng)前context的狀態(tài)、屬性
context.restore(); // 恢復(fù)到保存前的狀態(tài)干奢、屬性（重置）
平移、旋轉(zhuǎn)和縮放
context.translate(x,y); // 平移
context.rotate(angle); // 旋轉(zhuǎn)
context.scale(x,y); // 縮放
圖形組合
context.globalCompositeOperation = type;
// type:
source-over(默認(rèn))：在原有圖形上繪制新圖形
destination-over: 在原有圖形下繪制新圖形
source-in: 顯示新圖形交集部分
destination-in: 顯示原有圖形交集部分
source-out: 顯示新圖形非交集部分
destination-out: 顯示原有圖形非交集部分
source-atop: 顯示原有圖形+新圖形交集部分
destination-atop: 顯示新圖形+原有圖形交集部分
lighter: 交集部分顏色疊加
xor: 交集部分清除
copy: 只保留新圖形
繪制陰影
context.shadowOffsetX = num; // 陰影X軸位移(默認(rèn)0)
context.shadowOffsetY = num; // 陰影Y軸位移(默認(rèn)0)
context.shadowColor = "color"; // 陰影顏色
context.shadowBlur = num; // 陰影模糊范圍
(未完待續(xù)...)
