HTML5画布(CANVAS)速查简表
-
HTML5画布(Canvas)元素
1<canvas id="myCanvas" width="500" height="300">浏览器不支持画布(canvas)时的备案
123<canvas id="myCanvas" width="500" height="300">your browser doesn't support canvas!</canvas>2d context
1var context = canvas.getContext('2d');Webgl context (3d)
1var context = canvas.getContext('webgl'); -
图形
绘制方形
123context.rect(x, y, width, height);context.fill();context.stroke();填充区域
1context.fillRect(x, y, width, height);绘制方形的边框
1context.strokeRect(x, y, width, height);绘制圆形
123context.arc(x, y, radius, 0, Math.PI * 2);context.fill();context.stroke(); -
风格
填充
12context.fillStyle = 'red';context.fill();勾勒
12context.strokeStyle = 'red';context.stroke();线性渐变
12345var grd = context.createLinearGradient(x1, y1, x2, y2);grd.addColorStop(0, 'red');grd.addColorStop(1, 'blue');context.fillStyle = grd;context.fill();径向渐变
12345var grd = context.createRadialGradient(x1, y1, radius1, x2, y2, radius2);grd.addColorStop(0, 'red');grd.addColorStop(1, 'blue');context.fillStyle = grd;context.fill();图案
1234567var imageObj = new Image();imageObj.onload = function() {var pattern = context.createPattern(imageObj, 'repeat');context.fillStyle = pattern;context.fill();};imageObj.src = 'path/to/my/image.jpg';交点
1context.lineJoin = 'miter|round|bevel';线头
1context.lineCap = 'butt|round|square';阴影
1234context.shadowColor = 'black';context.shadowBlur = 20;context.shadowOffsetX = 10;context.shadowOffsetY = 10;Alpha (透明)
1context.globalAlpha = 0.5; // between 0 and 1 -
颜色格式
字符串
1context.fillStyle = 'red';16进制
1context.fillStyle = '#ff0000';16进制简写
1context.fillStyle = '#f00';RGB
1context.fillStyle = 'rgb(255,0,0)';RGBA
1context.fillStyle = 'rgba(255,0,0,1)'; -
路径
开始路径
1context.beginPath();画线
1context.lineTo(x, y);弧形
1context.arc(x, y, radius, startAngle, endAngle, counterClockwise);二次曲线
1context.quadraticCurveTo(cx, cy, x, y);二次曲线
1context.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);关闭路径
1context.closePath(); -
图片
画图
12345var imageObj = new Image();imageObj.onload = function() {context.drawImage(imageObj, x, y);};imageObj.src = 'path/to/my/image.jpg';指定尺寸画图
12345var imageObj = new Image();imageObj.onload = function() {context.drawImage(imageObj, x, y, width, height);};imageObj.src = 'path/to/my/image.jpg';裁剪图片
12345var imageObj = new Image();imageObj.onload = function() {context.drawImage(imageObj, sx, sy, sw, sh, dx, dy, dw, dh);};imageObj.src = 'path/to/my/image.jpg'; -
文本
写文字
123context.font = '40px Arial';context.fillStyle = 'red';context.fillText('Hello World!', x, y);写镂空文字
123context.font = '40pt Arial';context.strokeStyle = 'red';context.strokeText('Hello World!', x, y);粗体
1context.font = 'bold 40px Arial';斜体
1context.font = 'italic 40px Arial';对齐方式
1context.textAlign = 'start|end|left|center|right';文字基线
12context.textBaseline = 'top|hanging|middle|alphabetic|ideographic|bottom';获取文本宽度
1var width = context.measureText('Hello world').width; -
动画
移动
1context.translate(x, y);扩大缩小
1context.scale(x, y);旋转
1context.rotate(radians);水平翻转
1context.scale(-1, 1);上下翻转
1context.scale(1, -1);自定义变换
1context.transform(a, b, c, d ,e, f);设置变换
1context.setTransform(a, b, c, d ,e, f);切割
1context.transform(1, sy, sx, 1, 0, 0);重置
1context.setTransform(1, 0, 0, 1, 0, 0); -
状态存储
存储
1context.save();恢复
1context.restore(); -
裁剪
裁剪
12// draw path herecontext.clip(); -
图像数据
获取图像数据
12var imageData = context.getImageData(x, y, width, height);var data = imageData.data;遍历像素点
1234567891011var 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];}沿坐标遍历像素点
123456789101112var 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];}}设置图像数据
1context.putImageData(imageData, x, y); -
DATA URLS
获取Data URL
1var dataURL = canvas.toDataURL();使用Data URL生成图像
123456var imageObj = new Image();imageObj.onload = function() {context.drawImage(imageObj, 0, 0);};imageObj.src = dataURL; -
合成
合成操作
1context.globalCompositeOperation = 'source-atop|source-in|source-out|source-over|destination-atop|destination-in|destination-out|destination-over|lighter|xor|copy';