更新時(shí)間：2014-07-18HTML5畫(huà)布(CANVAS)元素
<canvas id="myCanvas" width="500" height="300">
復(fù)制代碼
瀏覽器不支持畫(huà)布(canvas)時(shí)的備案
<canvas id="myCanvas" width="500" height="300"> your browser doesn't support canvas!</canvas>
復(fù)制代碼
2d context
var context = canvas.getContext('2d');
復(fù)制代碼
Webgl context (3d)
var context = canvas.getContext('webgl');
復(fù)制代碼
圖形
繪制方形
context.rect(x, y, width, height);context.fill();context.stroke();
復(fù)制代碼
填充區(qū)域
context.fillRect(x, y, width, height);
復(fù)制代碼
繪制方形的邊框
context.strokeRect(x, y, width, height);
復(fù)制代碼
繪制圓形
context.arc(x, y, radius, 0, Math.PI * 2);context.fill();context.stroke();
復(fù)制代碼
風(fēng)格
填充
context.fillStyle = 'red';context.fill();
復(fù)制代碼
勾勒
context.strokeStyle = 'red';context.stroke();
復(fù)制代碼
線性漸變
var grd = context.createLinearGradient(x1, y1, x2, y2);grd.addColorStop(0, 'red'); grd.addColorStop(1, 'blue');context.fillStyle = grd;context.fill();
復(fù)制代碼
徑向漸變
var grd = context.createRadialGradient(x1, y1, radius1, x2, y2, radius2);grd.addColorStop(0, 'red');grd.addColorStop(1, 'blue');context.fillStyle = grd;context.fill();
復(fù)制代碼
圖案
var imageObj = new Image();imageObj.onload = function() { var pattern = context.createPattern(imageObj, 'repeat'); context.fillStyle = pattern; context.fill();};imageObj.src = 'path/to/my/image.jpg';
復(fù)制代碼
交點(diǎn)
context.lineJoin = 'miter|round|bevel';
復(fù)制代碼
線頭
context.lineCap = 'butt|round|square';
復(fù)制代碼
陰影
context.shadowColor = 'black';context.shadowBlur = 20;context.shadowOffsetX = 10;context.shadowOffsetY = 10;
復(fù)制代碼
Alpha (透明)
context.globalAlpha = 0.5; // between 0 and 1
復(fù)制代碼
顏色格式
字符串
context.fillStyle = 'red';
復(fù)制代碼
16進(jìn)制
context.fillStyle = '#ff0000';
復(fù)制代碼
16進(jìn)制簡(jiǎn)寫(xiě)
context.fillStyle = '#f00';
復(fù)制代碼
RGB
context.fillStyle = 'rgb(255,0,0)';
復(fù)制代碼
RGBA
context.fillStyle = 'rgba(255,0,0,1)';
復(fù)制代碼
路徑
開(kāi)始路徑
context.beginPath();
復(fù)制代碼
畫(huà)線
context.lineTo(x, y);
復(fù)制代碼
弧形
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
復(fù)制代碼
二次曲線
context.quadraticCurveTo(cx, cy, x, y);
復(fù)制代碼
二次曲線
context.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);
復(fù)制代碼
關(guān)閉路徑
context.closePath();
復(fù)制代碼
圖片
畫(huà)圖
var imageObj = new Image();imageObj.onload = function() { context.drawImage(imageObj, x, y);};imageObj.src = 'path/to/my/image.jpg';
復(fù)制代碼
指定尺寸畫(huà)圖
var imageObj = new Image();imageObj.onload = function() { context.drawImage(imageObj, x, y, width, height);};imageObj.src = 'path/to/my/image.jpg';
復(fù)制代碼
裁剪圖片
var imageObj = new Image();imageObj.onload = function() { context.drawImage(imageObj, sx, sy, sw, sh, dx, dy, dw, dh);};imageObj.src = 'path/to/my/image.jpg';
復(fù)制代碼
文本
寫(xiě)文字
context.font = '40px Arial';context.fillStyle = 'red';context.fillText('Hello World!', x, y);
復(fù)制代碼
寫(xiě)鏤空文字
context.font = '40pt Arial';context.strokeStyle = 'red';context.strokeText('Hello World!', x, y);
復(fù)制代碼
粗體
context.font = 'bold 40px Arial';
復(fù)制代碼
斜體
context.font = 'italic 40px Arial';
復(fù)制代碼
對(duì)齊方式
context.textAlign = 'start|end|left|center|right';
復(fù)制代碼
文字基線
context.textBaseline = 'top|hanging|middle|alphabetic|ideographic|bottom';
復(fù)制代碼
獲取文本寬度
var width = context.measureText('Hello world').width;
復(fù)制代碼
動(dòng)畫(huà)
移動(dòng)
context.translate(x, y);
復(fù)制代碼
擴(kuò)大縮小
context.scale(x, y);
復(fù)制代碼
旋轉(zhuǎn)
context.rotate(radians);
復(fù)制代碼
水平翻轉(zhuǎn)
context.scale(-1, 1);
復(fù)制代碼
上下翻轉(zhuǎn)
context.scale(1, -1);
復(fù)制代碼
自定義變換
context.transform(a, b, c, d ,e, f);
復(fù)制代碼
設(shè)置變換
context.setTransform(a, b, c, d ,e, f);
復(fù)制代碼
切割
context.transform(1, sy, sx, 1, 0, 0);
復(fù)制代碼
重置
context.setTransform(1, 0, 0, 1, 0, 0);
復(fù)制代碼
狀態(tài)存儲(chǔ)
存儲(chǔ)
context.save();
復(fù)制代碼
恢復(fù)
context.restore();
復(fù)制代碼
裁剪
裁剪
// draw path herecontext.clip();
復(fù)制代碼
圖像數(shù)據(jù)
獲取圖像數(shù)據(jù)
var imageData = context.getImageData(x, y, width, height);var data = imageData.data;
復(fù)制代碼
遍歷像素點(diǎn)
var imageData = context.getImageData(x, y, width, height);var data = imageData.data;var len = data.length;var i, red, green, blue, alpha;
for(i = 0; i < len; i += 4) { red = data[i]; green = data[i + 1]; blue = data[i + 2]; alpha = data[i + 3];}
復(fù)制代碼
沿坐標(biāo)遍歷像素點(diǎn)
var imageData = context.getImageData(x, y, width, height);var data = imageData.data;var x, y, red, green, blue, alpha;
for(y = 0; y < imageHeight; y++) { for(x = 0; x < imageWidth; x++) { red = data[((imageWidth * y) + x) * 4]; green = data[((imageWidth * y) + x) * 4 + 1]; blue = data[((imageWidth * y) + x) * 4 + 2]; alpha = data[((imageWidth * y) + x) * 4 + 3]; }}
復(fù)制代碼
設(shè)置圖像數(shù)據(jù)
context.putImageData(imageData, x, y);
復(fù)制代碼
DATA URLS
獲取Data URL
var dataURL = canvas.toDataURL();
復(fù)制代碼
使用Data URL生成圖像
var imageObj = new Image();imageObj.onload = function() { context.drawImage(imageObj, 0, 0);};
imageObj.src = dataURL;
復(fù)制代碼
合成
合成操作
context.globalCompositeOperation = 'source-atop|source-in|source-out|source-over|destination-atop|desti
