• HTML5 Canvas Element
  • Html5 canvas element
    <canvas id="myCanvas" width="500" height="300"></canvas>
  • Canvas 错误提示
    <canvas id="myCanvas" width="500" height="300">
        您的浏览器不支持 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';
  • Text Baseline 文本基线
    context.textBaseline = 'top|hanging|middle|alphabetic|ideographic|bottom';
  • 获取文本宽度
    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();
  • 绘图符合操作
  • 合成操作
    context.globalCompositeOperation = 'source-atop|source-in|source-out|source-over|destination-atop|destination-in|destination-out|destination-over|lighter|xor|copy';