持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

Canvas入门(二)

如果这篇文章对你有所帮助，点个赞呗！！！

绘制路径

绘制路径需要先调用beginPath，表示要开始绘制路径，再调用以下方法来绘制路径。

lineTo(x, y)：绘制一条从上一个点到(x, y)的直线
moveTo(x, y)：不绘制线条，只是把画笔移动到(x, y)
更多

绘制完路径后，可以指定fillStyle属性并调用fill方法来填充路径，也可以指定strokeStyle属性并调用stoke方法来描画路径。

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

// 确保浏览器支持canvas
if (mycanvas.getContext) {
  const context = mycanvas.getContext("2d");

  // 创建路径
  context.beginPath();

  // 绘制圆弧，参数分别是圆心x坐标、圆形y坐标、圆弧半径、圆弧起始点(单位：弧度)、圆弧终点(单位：弧度)、绘制方向(false为顺时针绘制，true为逆时针绘制)
  context.arc(100, 100, 99, 0, 2 * Math.PI, true);

  // context.fillStyle = 'pink'
  // context.fill()

  context.strokeStyle = "pink";
  context.stroke();
}

还可以调用clip方法创建一个新的剪切区域。

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

// 确保浏览器支持canvas
if (mycanvas.getContext) {
  const context = mycanvas.getContext("2d");

  // 创建路径
  context.beginPath();

  // 绘制圆弧，参数分别是圆心x坐标、圆形y坐标、圆弧半径、圆弧起始点(单位：弧度)、圆弧终点(单位：弧度)、绘制方向(false为顺时针绘制，true为逆时针绘制)
  context.arc(100, 100, 50, 0, 2 * Math.PI, true);

  context.fillStyle = "pink";
  context.clip();

  context.fillRect(0, 0, 100, 100);
}

上面的扇形怎么出来的呢？我们可以把clip变成fill，看下没有被剪切的话，是什么样子。

也就是说，实际上剪切就是两个图形相交部分。

如果使用lineTo需要注意：没有设置moveTo时，这个位置并不是(0, 0)，而是空，所以第一次的lineTo没法画出结果。

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

// 确保浏览器支持canvas
if (mycanvas.getContext) {
  const context = mycanvas.getContext("2d");
  // 创建路径
  context.beginPath();

  // context.moveTo(0, 0);
  context.lineTo(100, 50);
  context.lineTo(200, 0);

  context.lineWidth = 8;
  context.strokeStyle = "pink";

  // 描画路径
  context.stroke();
}

没有moveTo：

有moveTo：

beginPath 的作用

上面的例子中，beginPath并没有作用，也就是说上面的例子中，其实有没有beginPath都一样。那么beginPath有什么作用呢？

beginPath表示下面绘制的图形是一个新的路径。具体看下实例。

const context = mycanvas.getContext("2d");
// 创建路径
context.beginPath();

context.moveTo(0, 0);
context.lineTo(100, 50);

context.lineWidth = 8;
context.strokeStyle = "pink";

// 描画路径
context.stroke();

context.lineTo(200, 0);
context.strokeStyle = "purple";
context.stroke();

想要的效果是画出两条不一样颜色的线，但是最后是一种颜色折线，这是因为我们只是用了一次beginPath，所以就会把这两条线当成同一个路径，最后调用的stroke就会把原本是粉色的线再用紫色画一遍，所以最终的效果就是只有一条折线。

所以需要使用beginPath创建新路径，新的路径还是会有没有设置moveTo时，这个位置并不是(0, 0)，而是空的问题，所以需要使用moveTo设置位置

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

// 确保浏览器支持canvas
if (mycanvas.getContext) {
  const context = mycanvas.getContext("2d");
  // 创建路径
  context.beginPath();

  context.moveTo(0, 0);
  context.lineTo(100, 50);

  context.lineWidth = 8;
  context.strokeStyle = "pink";
  context.stroke();

  context.beginPath();
  // 创建新的路径，需要重新设置位置
  context.moveTo(100, 50);
  context.lineTo(200, 0);
  context.strokeStyle = "purple";
  context.stroke();
}

closePath 的作用

有可能会陷进closePath是结束路径的误区，认为closePath就是beginPath的配套。但是closePath和beginPath并不是配套的，它们的功能不一样。所以closePath之后的路径也不是新的路径，只有beginPath才行。

而closePath的作用是将最近绘制的路径闭合，和之前有没有beginPath无关。

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

// 确保浏览器支持canvas
if (mycanvas.getContext) {
  const context = mycanvas.getContext("2d");

  // context.beginPath();  // 有无`beginPath`都没有影响

  context.moveTo(10, 10);
  context.lineTo(100, 50);
  context.lineTo(20, 70);
  context.closePath();

  context.lineWidth = 8;
  context.strokeStyle = "pink";
  context.stroke();
}

上面我们只绘制了两条线，但是最终得到的结果是一个三角形，这是因为我们使用closePath把最近绘制的路径闭合了。

绘制文本

绘制文本有两种方法。

fillText：使用fillStyle属性绘制文本
strokeText：使用strokeStyle属性绘制文本

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

// 确保浏览器支持canvas
if (mycanvas.getContext) {
  const context = mycanvas.getContext("2d");

  context.moveTo(10, 10);
  context.lineTo(150, 75);
  context.lineTo(30, 100);
  context.closePath();

  context.lineWidth = 1;
  context.strokeStyle = "pink";

  context.fillStyle = "purple";
  context.fillText("CLZ", 50, 60);
  context.strokeText("CLZ", 50, 80);

  context.stroke();
}

可以通过font、textAlign、textBaseline属性设置文本的字体、对齐方式、基线。

示例：

context.font = "700 16px Arial";

textAlign：

如果是start，那么 x 坐标就是文本的左侧坐标
如果是center，那么 x 坐标就是文本的中心点坐标
如果是end，那么 x 坐标就是文本的右侧坐标

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

// 确保浏览器支持canvas
if (mycanvas.getContext) {
  const context = mycanvas.getContext("2d");

  context.moveTo(10, 10);
  context.lineTo(150, 75);
  context.lineTo(30, 100);
  context.closePath();

  context.lineWidth = 1;
  context.strokeStyle = "pink";

  context.font = "700 16px Arial";
  context.fillStyle = "purple";

  context.textAlign = "start";
  context.strokeText("CLZ", 50, 50);

  context.textAlign = "center";
  context.fillText("CLZ", 50, 65);

  context.textAlign = "end";
  context.strokeText("CLZ", 50, 80);

  context.stroke();
}

textBaseline类似