Canvas入门(一)

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

创建canvas至少需要提供width和height属性，才能通知浏览器需要多大位置画图。标签的内容是后备数据，在浏览器不支持canvas元素时显示。

<canvas id="mycanvas" width="200" height="200">haha</canvas>

可以通过if(canvas.getContext)来判断浏览器是否支持canvas。

通过canvas.getContext('2d')可以获取 2D 绘图上下文。2D 绘图上下文提供了绘制 2D 图形的方法。左边原点(0, 0)在 canvas元素的左上角，x 坐标向右增长，y 坐标向下增长。

从画布上导出一张 PNG 格式的图片

<body>
  <canvas id="mycanvas" width="200" height="200">haha</canvas>

  <script>
    const mycanvas = document.getElementById("mycanvas");

    // 确保浏览器支持canvas
    if (mycanvas.getContext) {
      // 获得图像的数据URI
      const imgURI = mycanvas.toDataURL("image/png");
      console.log(imgURI);
    }
  </script>
</body>

我们查看控制台可以发现，输出了一串base64编码，也就是说，canvas.toDataURL就是将画布 canvas转换成base64编码。

填充与描边

填充就是以特定的样式填充形状，包括颜色、渐变、图像
描边就是只给形状边界着色。

显示效果取决于两个属性：fillStyle和strokeStyle。

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

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

  context.fillStyle = "#000";
  context.strokeStyle = "red";
}

没有效果？别急，这是因为我们只是设置了填充和描边而已，想要它生效，还需要绘制出来才能有效果。

绘制矩形

与绘制矩形相关的方法有三个。它们都接收 4 个参数：矩形 x 坐标、矩形 y 坐标、矩形宽度和矩形高度。(单位是像素，但是传参时不需要传单位)

fillRect
strokeRect
clearRect

`fillRect`：绘制并填充矩形

fillRect：以指定颜色在画布上绘制并填充矩形，填充色使用fillStyle来设置。

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

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

  context.fillStyle = "pink";
  context.fillRect(10, 10, 50, 50);

  context.fillStyle = "rgba(0, 0, 0, .1)";
  context.fillRect(30, 30, 50, 50);
}

`stokeRect`：绘制矩形轮廓

stokeRect：绘制矩形轮廓，颜色由strokeStyle来指定。

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

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

  context.strokeStyle = "red";
  // 设置描边宽度
  context.lineWidth = 5;
  context.strokeRect(10, 10, 50, 50);

  context.strokeStyle = "blue";
  context.fillStyle = "rgba(0, 0, 0, .1)";
  context.strokeRect(30, 30, 50, 50);
}

`clearRect`：擦除画布中某个区域

clearRect：擦除画布中某个区域，会把擦除的区域变透明。

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

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

  context.fillStyle = "red";
  context.fillRect(0, 0, 200, 200);

  context.clearRect(50, 50, 100, 100);
}