Canvas API
屬性
- width
- height
注意：在canvas標籤中宣告屬性width=1000，與應用樣式width:1000px或width:1000是不同的，在使用canvas API上會有偏差，必須使用前者進行宣告，height亦是如此
方法
-
getContext(contextId)
獲取CanvasRenderingContext2D物件並返回
-
toDataURL([type][,level])
將畫布轉化為指定型別的圖片，並返回圖片的url。若型別為image/jpeg，還可指定質量等級，值在0到1之間
CanvasRenderingContext2D API
屬性
-
fillStyle
表示填充風格
-
strokeStyle
表示輪廓風格
-
globalAlpha
設定影象透明度
-
globalCompositeOperation
設定重疊影象的覆蓋方式，可取值如下，
- source-over：預設值，顯示源和匯的差集、源的交集
- destination-over：顯示源和匯的差集、匯的交集
- source-in：只顯示源的交集
- destination-in：只顯示匯的交集
- source-out：只顯示源的差集
- destination-out：只顯示匯的差集
- lighter：顯示源和匯的差集、交集混合顏色變淡
- darker：顯示源和匯的差集、交集混合顏色變深
- xor：顯示源和匯的差集
- source-atop：只顯示源的差集
- destination-atop：顯示匯的交集和源的差集
- copy：顯示源
-
lineCap
表示線段的箭頭樣式，可取值為butt、round、square，預設值為butt，表示頭尾為長方形，round表示頭尾為半圓形，square表示頭尾增加一個長方形，其長為線寬的一半，高為線寬
-
lineJoin
表示線段的連線方式，可取值為miter、round、bevel，預設值為miter，線段在連線處外側延伸直至交於一點，若外延交點距離大於限制值是表現為bevel風格，其連線處為斜角，round連線處為一個圓角，半徑為線寬
-
lineWidth
表示線段的線寬
-
miterLimit
表示線段連線處的斜率
-
shadowBlur
陰影模糊等級，值範圍為不小於0
-
shadowColor
陰影顏色
-
shadowOffsetX
陰影X偏移量
-
shadowOffsetY
陰影Y偏移量
-
font
-
textAlign
-
textBaseline
方法
-
restore()
恢復至上次儲存的繪圖狀態，包括所有屬性和transform、clip兩個方法
-
save()
儲存當前繪圖狀態
-
scale(x,y)
分別在x和y軸方向上按指定比例縮放
-
translate(x,y)
分別在x和y軸方向上按指定值偏移，實質上是可以看做是畫布參考座標系上的原點的移動
-
rotate(angle)
順時針旋轉angle度
-
transform(m11,m12,m21,m22,dx,dy)
乘上如下矩陣進行變換，
m11 m21 dx m21 m22 dy 0 0 1 複製程式碼 -
setTransform(m11,m12,m21,m22,dx,dy)
重設變換矩陣
-
createLinearGradient(x0,y0,x1,y1)
線性漸變
-
createRadialGradient(x0,y0,r0,x1,y1,r1)
徑向漸變，返回一個漸變物件，有如下方法，
addColorStop(point,color) 複製程式碼用於新增漸變顏色點，point值在0至1之間
-
createPattern(image,repetition)
指定影象和重複方向建立畫布圖案物件，repetition可取值為repeat、repeat-x、repeat-y和no-repeat
-
arc(x,y,r,a0,a1)
畫弧
-
arcTo(x1,y1,x2,y2,radiu)
繪製路徑中最後一個點(x0,y0)分別和點(x1,y1)、(x2,y2)構成的兩條直線間半徑為radiu的最短弧長
-
rect(x,y,w,h)
畫矩形
-
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
三次貝塞爾曲線
-
quadraticCurveTo(cpx,cpy,x,y)
二次貝塞爾曲線
-
clearRect(x,y,w,h)
清除矩形內的畫素
-
fillRect(x,y,w,h)
繪製填充矩形
-
strokeRect(x,y,w,h)
繪製輪廓矩形
-
moveTo(x,y)
移動到指定位置
-
lineTo(x,y)
畫線到指定位置
-
beginPath()
開始新的子路徑
-
closePath()
關閉子路徑
-
isPointInPath(x,y)
判斷點(x,y)是否在當前路徑
-
fill()
填充方式繪製
-
stroke()
輪廓方式繪製
-
clip()
裁切路徑，只顯示裁切區域的內容
-
fillText(text,x,y[,maxWidth])
-
strokeText(text,x,y[,maxWidth])
-
drawImage(image,dx,dy)
-
drawImage(image,dx,dy,dw,dh)
-
drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
-
createImageData(sw,sh)/createImageData(imagedata)
指定寬高或明確寬高的影象，建立ImageData物件
-
getImageData(sx,sy,sw,sh)
獲取指定圖形區域的ImageData物件
-
putImageData(imagedata,dx,dy[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])
在繪圖畫布上繪製給定的ImageData物件
應用
碰撞球
效果如下，
//畫線
function drawLine(context, x0, y0, x1, y1, color) {
context.save();
context.beginPath();
if (color == null) {
context.strokeStyle = "#A7AEB0";
} else {
context.strokeStyle = color;
}
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.stroke();
context.closePath();
context.restore();
}
//畫球
function draw3DBall(context, x0, y0, c0, c1) {
context.save();
context.beginPath();
context.translate(x0, y0);
var gradient = context.createRadialGradient(3, 3, 0, 0, 0, 10);
if (c0 == null) {
gradient.addColorStop(0, "#eee");
} else {
gradient.addColorStop(0, c0);
}
if (c1 == null) {
gradient.addColorStop(1, "#57BADA");
} else {
gradient.addColorStop(0, c1);
}
context.fillStyle = gradient;
context.arc(0, 0, 10, 0, 2 * Math.PI);
context.fill();
context.closePath();
context.restore();
}
複製程式碼原始碼地址，
https://github.com/muzhidong/frontend-demo/tree/master/collidedball
複製程式碼旗幟
效果如下，
//畫旗幟
function drawFlag(x0, y0, x1, y1, offsetX) {
con.beginPath();
con.moveTo(x0, y0 + 50 * Math.sin(offsetX * Math.PI * 2 / (x1 - x0)));
for (var i = 1; i <= x1 - x0; i++) {
con.lineTo(x0 + i, y0 + 50 * Math.sin((offsetX + i) * Math.PI * 2 / (x1 - x0)));
}
con.lineTo(x1, y1 + 50 * Math.sin(offsetX * Math.PI * 2 / (x1 - x0)));
for (var j = 1; j <= x1 - x0; j++) {
con.lineTo(x1 - j, y1 + 50 * Math.sin((offsetX + x1 - x0 - j) * Math.PI * 2 / (x1 - x0)));
}
con.lineTo(x0, y0 + 50 * Math.sin(offsetX * Math.PI * 2 / (x1 - x0)));
con.closePath();
con.fillStyle = "#1890ff";
con.fill();
}
複製程式碼原始碼地址，
https://github.com/muzhidong/frontend-demo/tree/master/flutteredflag
複製程式碼放大鏡
放大鏡效果已封裝成一個外掛使用，具體可訪問下面連結，
https://github.com/muzhidong/magnify
複製程式碼