HTML5 Canvas 在线参考手册，语法速查表_H5之家 - 中国HTML5教程资源分享第一站

HTML5 Canvas Element

Html5 canvas element <canvas></canvas>

Canvas 错误提示 <canvas> 您的浏览器不支持 Canvas! </canvas>

2D 环境 var context = canvas.getContext('2d');

Webgl 环境 (3D) var context = canvas.getContext('webgl');

Paths 路径

开始路径 context.beginPath();

Line 直线 context.lineTo(x, y);

Arc 圆/弧 context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

二次曲线 context.quadraticCurveTo(cx, cy, x, y);

三次曲线 context.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);

结束路径 context.closePath();

形状

绘制矩形 context.rect(x, y, width, height); context.fill(); context.stroke();

填充矩形 context.fillRect(x, y, width, height);

绘制矩形 context.strokeRect(x, y, width, height);

绘制圆 context.arc(x, y, radius, 0, Math.PI * 2); context.fill(); context.stroke();

Text 文本

Fill Text 填充文本 context.font = '40px Arial'; context.fillStyle = 'red'; context.fillText('Hello World!', x, y);

Stroke Text 比划文本 context.font = '40pt Arial'; context.strokeStyle = 'red'; context.strokeText('Hello World!', x, y);

Bold Text 粗体文本 context.font = 'bold 40px Arial';

Italic Text 斜体文本 context.font = 'italic 40px Arial';

Text Align 文本对齐 context.textAlign = 'start|end|left|center|right';

获取文本宽度 var width = context.measureText('Hello world').width;

Style 样式

Fill 填充 context.fillStyle = 'red'; context.fill();

Stroke context.strokeStyle = 'red'; context.stroke();

线性渐变 var grd = context.createLinearGradient(x1, y1, x2, y2); grd.addColorStop(0, 'red'); grd.addColorStop(1, 'blue'); context.fillStyle = grd; context.fill();

放射渐变 var grd = context.createRadialGradient(x1, y1, radius1, x2, y2, radius2); grd.addColorStop(0, 'red'); grd.addColorStop(1, 'blue'); context.fillStyle = grd; context.fill();

Line Join context.lineJoin = 'miter|round|bevel';

Line Cap 线帽 context.lineCap = 'butt|round|square';

Showdow 阴影 context.shadowColor = 'black'; context.shadowBlur = 20; context.shadowOffsetX = 10; context.shadowOffsetY = 10;

Alpha (Opacity) 透明度 context.globalAlpha = 0.5; // 0 到 1

Color 颜色

String 字符串 context.fillStyle = 'red';

Hex 十六进制（完整） context.fillStyle = '#ff0000';

Hex 十六进制（简写） context.fillStyle = '#f00';

RGB context.fillStyle = 'rgb(255,0,0)';

RGBA context.fillStyle = 'rgba(255,0,0,1)';

Transforms

Translate context.translate(x, y);

Scale context.scale(x, y);

Rotate context.rotate(radians);

水平翻转 context.scale(-1, 1);

垂直翻转 context.scale(1, -1);

自定义 Transforms context.transform(a, b, c, d ,e, f);

剪切操作

剪切 context.clip();

Images 图像

绘制图像默认大小 var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, x, y); }; imageObj.src = 'images/image.jpg';

绘制图像并设置大小 var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, x, y, width, height); }; imageObj.src = 'images/image.jpg';

剪切图像 var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, sx, sy, sw, sh, dx, dy, dw, dh); }; imageObj.src = 'images/image.jpg';

Images Data 图像数据

获取图像数据 var imageData = context.getImageData(x, y, width, height); var data = imageData.data;

遍历图像像素 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]; }

遍历图像像素坐标 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]; } }

设置图像数据 context.putImageData(imageData, x, y);

Image Data URL 图像数据 URL

获取他图像数据 URL var dataURL = canvas.toDataURL();

将图像数据 URL 绘制在 Canvas 上 var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, 0, 0); }; imageObj.src = dataURL;

保存/还原当前环境

保存 context.save();

还原 context.restore();

绘图符合操作