簡介
在js中進行圖片的繪製
往往用於全屏類的動畫和小遊戲的製作和圖標的繪製
基本語法
<canvas width="400" height="500" id="canvas"></canvas>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas和其他dom元素一樣都擁有自己的方法
canvas常用方法
ctx.beginPath()：設置起始路徑
ctx.closePath()：自動閉合開始點和終點
ctx.fillStyle = color：設置填充樣式
ctx.strokeStyle = color：設置描邊樣式
ctx.fillStyle()：聲明填充
ctx.strokeStyle：聲明描邊
ctx.lineWidth = number：描邊寬度
ctx.rect(x,yx,w,h)：繪製矩形
x，y：起始點座標
w：設定的寬度
h：設定的高度
ctx.clearRect(x,y,w,h)：清除矩形
ctx.arc(x,y,r,start_point,end_point,countWise)：繪製圓形
x,y：圓心座標
r：圓心的半徑
start_point：起始點（0-2*math.PI）
end_point：終止點（0-2*math.PI）
countWise：繪製方向|true、flase
繪製線段
moveTo(x,y)：設定要開始線段的座標
lineTo(x,y)：目標線段座標
arcTo(x1,y1,x2,y2,r)：繪製弧度
x1,y1：控制點座標
x2,y2：結束點座標
r：繪製弧度的半徑
ctx.quadraticCurveTo(x1,y1,x2,y2)：繪製二次貝塞爾曲線
x1,y1：控制點座標
x2,y2：結束點座標
ctx.bezierCurveTo(x1,y1,x2,y2,x3,y3)：繪製三次貝塞爾曲線
x1,y1：控制點座標
x2,y2：結束點座標
x3,y3：結束點座標
關於css3中的貝塞爾曲線
貝塞爾曲線是指過渡效果
ctx.createLinearGradient(x1,y1,x2,y2)：canvas線性漸變
x1,y1：起點座標
x1,y1：起點座標
lg.addColorStop(p,color)：0-1設置顏色
可以設置填充，描邊：
var lg = ctx.cteateLinearGradient(x1,y1,x2,y2)
fillStyle = lg
ctx.createRadialGradient(x1,y1,r1,x2,y2,r2)：設置徑向漸變
x1,y1,r1：內圓圓心的座標和半徑
x2,y2,r2：外圓圓心的座標和半徑
圖形轉換
ctx.translate(x,y)：平移
x,y：平移的座標
ctx.rotate(darg)：旋轉
darg：弧長 arg*Math.PI/180
ctx.scale(w,h)：放大
w：寬度方向上倍數 h：高度方向上倍數
繪製陰影
shadowOffsetX：水平平移距離
shadowOffsetY：垂直平移距離
shadowBlur：模糊大小
shadowColor：陰影顏色
繪製文本屬性
ctx.font = "style size family"：設置文本樣式
ctx.textBaseline = "top|midde|bottom"：設置文本基線
ctx.textAlign = "left|center|right"：設置水平對齊方式
ctx.fillText = "text,x,y"：設置實心字體
text：文字信息
x,y：文字位置
ctx.strokeText = "text,x,y"：設置空心字體
text：文字信息
x,y：文字位置
繪製圖片
drawImage(img,sx,sy,sw,sh,x,y,w,h)
sx,sy：裁剪座標
sw,sh：裁剪高度
x,y：canvas中的座標
w,h：對象高度
代碼： var img = new Image();
img.src = "img/html.png";
img.onload = function(){
ctx.drawImage(img,0,0,399,302,0,0,800,800);
}
圖像組合
globalCompositeOperation：設置圖像組合
course-over：新圖像在原圖像之上
destination-over：原圖上在新圖像之上
source-in：取部分交集顯示新圖像
destination-in：去交集部分顯示原圖像
sourse-atop：顯示原圖和交集部分 交集部分顯示新圖像
destination-atop：顯示新圖像和交集部分 交集部分顯示原圖像
sourse-out：顯示新圖像非交集部分
destination-out：顯示原圖像非交集部分
lighter：都顯示，重疊部分顏色疊加
xor：費交集部分顯示
copy：只顯示新圖像
存入和讀取
ctx.save()：存入
ctx.restore()：讀取