Canvas API

Canvas API 提供了一个通过 JavaScript 和 HTML 的 <canvas> 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas API 主要聚焦于 2D 图形。而同样使用 <canvas> 元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。

<canvas id="canvas" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt="" />
</canvas>;

const canvas = document.getElementById("canvas");

if (canvas.getContext) {
  // 使用画布而且不需要透明，这个选项可以帮助浏览器进行内部优化。
  var ctx = canvas.getContext("2d", { alpha: false });
  var img = new Image(); // 创建 img 元素
  img.onload = function () {

    // 绘制图片：drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 。
    // 前4个是定义图像源的切片位置和大小，后 4 个则是定义切片的目标显示位置和大小。
    ctx.drawImage(img, 0, 0, 150, 150);
  };
  img.src = "myImage.png"; // 设置图片源地址
  // 控制图像的缩放行为
  ctx.imageSmoothingEnabled = false;

  // 设置图形的填充颜色。
  ctx.fillStyle = "green";
  //设置图形轮廓的颜色。rgb(255,165,0,0.5)
  ctx.strokeStyle = "#FFA500";

  //设置线条宽度。
  ctx.lineWidth = 20;
  //设置线条末端样式。butt,round,square
  ctx.lineCap = type;
  //设定线条与线条间接合处的样式。miter,round,bevel
  ctx.lineJoin = type;
  //限制当两条线相交时交接处最大长度
  ctx.miterLimit = 20;

  //返回一个包含当前虚线样式，长度为非负偶数的数组。
  ctx.getLineDash();
  //设置当前虚线样式。
  ctx.setLineDash(segments);
  ctx.setLineDash([4, 2]);
  //设置虚线样式的起始偏移量。
  ctx.lineDashOffset = 20;

  // 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
  let lineargradient = ctx.createLinearGradient(x1, y1, x2, y2);

  // 前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，
  //后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
  ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);

  // 给渐变上色
  lineargradient.addColorStop(0, "white");
  lineargradient.addColorStop(1, "black");

  // 绘制一个填充的矩形
  ctx.fillRect(10, 10, 150, 100);
  // 绘制一个矩形的边框
  ctx.strokeRect(x, y, width, height);
  // 清除指定矩形区域，让清除部分完全透明
  ctx.clearRect(x, y, width, height);

  //新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
  ctx.beginPath();
  //移动笔触位置
  ctx.moveTo(75, 50);
  //绘制一条从当前位置到指定 x 以及 y 位置的直线。
  ctx.lineTo(100, 75);
  ctx.lineTo(100, 25);

  //画一个以（x,y）为圆心的以 radius 为半径的圆弧（圆），从 startAngle 开始
  //到 endAngle 结束，按照 anticlockwise 给定的方向（默认为顺时针）来生成。
  arc(x, y, radius, startAngle, endAngle, anticlockwise);
  //根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点
  arcTo(x1, y1, x2, y2, radius);
  //绘制二次贝塞尔曲线，cp1x,cp1y 为一个控制点，x,y 为结束点。
  quadraticCurveTo(cp1x, cp1y, x, y);
  //绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。
  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
  // 绘制弧线
  ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
  //通过填充路径的内容区域生成实心的图形。
  ctx.fill();
  //通过线条来绘制图形轮廓。
  ctx.stroke();
  // 闭合路径之后图形绘制命令又重新指向到上下文中。
  ctx.closePath();

  //Path2D 对象：用来缓存或记录绘画命令，这样你将能快速地回顾路径
  /**
     * new Path2D(); // 空的 Path 对象
        new Path2D(path); // 克隆 Path 对象
        new Path2D(d); // 从 SVG 建立 Path 对象
     */

  //使用 SVG paths：这条路径将先移动到点 (M10 10) 然后再水平移动 80 个单位(h 80)，
  //然后下移 80 个单位 (v 80)，接着左移 80 个单位 (h -80)，再回到起点处 (z)。
  var p = new Path2D("M10 10 h 80 v 80 h -80 Z");

  var rectangle = new Path2D();
  rectangle.rect(10, 10, 50, 50);

  var circle = new Path2D();
  circle.moveTo(125, 35);
  circle.arc(100, 35, 25, 0, 2 * Math.PI);

  ctx.stroke(rectangle);
  ctx.fill(circle);

  // 图案样式：Image 可以是一个 Image 对象的引用，或者另一个 canvas 对象。
  //Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。
  createPattern(image, type);

  //设定阴影在 X 延伸距离
  ctx.shadowOffsetX = 2;
  //设定阴影在 Y 轴的延伸距离
  ctx.shadowOffsetY = 2;
  //阴影的模糊距离
  ctx.shadowBlur = 2;
  // 用于设定阴影颜色效果，默认是全透明的黑色。
  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

  //绘制文本的样式。这个字符串使用和 CSS font 属性相同的语法。默认的字体是 10px sans-serif。
  ctx.font = "20px Times New Roman";
  // 文本对齐选项。可选的值包括：start, end, left, right or center
  ctx.textAlign = "start";
  //基线对齐选项。可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom
  ctx.textBaseline = "alphabetic";
  //文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。
  ctx.direction = "inherit";
  ctx.fillStyle = "Black";
  // 返回TextMetrics对象的文本宽度、所在像素，这些体现文本特性的属性。
  var text = ctx.measureText("foo"); // TextMetrics object
  text.width; // 16;
  // 在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。
  ctx.fillText("Sample String", 5, 30, 20);
  // 在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。
  ctx.strokeText("Sample String", 5, 30, 20);
  // 填充规则：nonzero,evenodd
  ctx.fill("evenodd");

  //保存画布 (canvas) 的所有状态
  ctx.save();
  // 恢复 save时状态
  ctx.restore();

  // 移动画布
  ctx.translate(x, y);
  // 旋转画布
  ctx.rotate(angle);
  // 缩放画布
  ctx.scale(x, y);
  // 变形矩阵
  ctx.transform(a, b, c, d, e, f);
  // 这个方法会将当前的变形矩阵重置为单位矩阵
  ctx.setTransform(a, b, c, d, e, f);
  // 重置当前变形为单位矩阵，等于：ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.resetTransform();

  //画新图形时采用的遮盖策略
  ctx.globalCompositeOperation = type;

  //将当前正在构建的路径转换为当前的裁剪路径。
  ctx.clip();

  // 创建特定尺寸的 ImageData 对象。所有像素被预设为透明黑。
  ctx.createImageData(width, height);
  ctx.createImageData(anotherImageData);
  // 获取画布像素数据的 ImageData 对象
  ctx.getImageData(left, top, width, height);
  // 写入像素数据
  ctx.putImageData(myImageData, dx, dy);

  // 保存图片:放到拥有download属性的超链接里的src
  ctx.toDataURL("image/png", quality);
  // 画布创建一个 Blob 对象。
  ctx.toBlob(callback, type, encoderOptions);
} else {
  // canvas-unsupported code here
}