canvas常用方法

木头的喵喵拖孩

2024-11-12 11:37 2024-11-12 11:37 创建 2024-11-14 14:16:15 2024-11-14 14:16 更新

学习

创建 canvas 画布

注意：

canvas 的原点是在左上角，而不是传统的左下角，这个需要自己处理

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      #canvas {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <canvas id="canvas"></canvas>

    <script>
      const $canvas = document.getElementById("canvas");
      /*
        注意：
        这里一定要设置画布的宽高，否则画布宽高可能不是预期的数值，画布的宽高以及内部的图形的数值单位都是像素（px）
        我这里将画布的宽高设置为canvas元素的可视宽度和高度（包含border），这样画布的宽高就是我们看得到的具体的canvas的宽高了
        */
      $canvas.width = $canvas.offsetWidth;
      $canvas.height = $canvas.offsetHeight;

      // 创建画布2d上下文ctx
      const ctx = $canvas.getContext("2d");

      // 后续画画的操作都是在ctx上进行的
    </script>
  </body>
</html>

基础图形的绘制

图形的绘制基本都包含 路径绘制 stroke 和 颜色填充 fill。
视业务需要灵活选择。

折线

// 绘制折线
/*
beginPath重置并清除之前的所有路径。
当你需要开始画一个新图形并且之前有未完成的图形时，需要调用beginPath()；
不需要调用beginPath()的情景：1.之前没有未完成的图形时，2.只画一个图形时。
*/
ctx.beginPath();
ctx.strokeStyle = "red"; // 设置线条颜色
ctx.lineWidth = 5; // 设置线条宽度，px
ctx.setLineDash([10, 5]); // 如果需要画虚线，需要设置该数组，数组里第一个元素表示实线的长度px，第二个元素表示空白的长度px
ctx.moveTo(0, 0); // 移动画笔到坐标(0,0)，不画线
ctx.lineTo(100, 100); // 移动画笔到坐标(100,100)，画线
ctx.lineTo(200, 0); // 移动画笔到坐标(200,0)，画线
ctx.closePath(); // 闭合路径，自动从当前点画一条线到起始点
ctx.stroke(); // 这一步才是真正的绘制，不调用就不会画到画布上

// 填充折线围起来的区域，不需要closePath()
// 如果只需要画线，这一步就不是必须的
ctx.fillStyle = "blue"; // 填充颜色
ctx.fill(); // 这一步才是真正的填充，不调用就不会画到画布上

矩形

// 绘制矩形边框
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.setLineDash([10, 0]); // 这样设置，就是实线，而不是虚线
ctx.lineWidth = 5;
ctx.strokeRect(50, 50, 200, 100); // 参数分别为x坐标、y坐标、宽度、高度

// 填充矩形
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 200, 100); // 参数分别为x坐标、y坐标、宽度、高度

// 擦除矩形
// 会擦除这块区域的所有图形
ctx.clearRect(75, 75, 100, 50); // 参数分别为x坐标、y坐标、宽度、高度

圆形

// 绘制圆形边框
const radius = 50; // 设置圆的半径
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.setLineDash([10, 0]); // 这样设置，就是实线，而不是虚线
ctx.lineWidth = 5;
ctx.arc(300, 300, radius, 0, Math.PI * 2, false); // 参数分别为x坐标、y坐标、半径、起始角度（弧度）、结束角度（弧度）、是否逆时针绘制
ctx.stroke(); // 这一步才是真正的绘制，不调用就不会画到画布上

// 填充圆形
ctx.fillStyle = "blue";
ctx.fill(); // 这一步才是真正的填充，不调用就不会画到画布上

剪切图形

有时候需要在一个异形区域类绘制图形，此时就需要裁剪功能 clip() 了

// 设置裁剪区域
ctx.beginPath();
ctx.moveTo(500, 500);
ctx.lineTo(500, 500);
ctx.lineTo(550, 550);
ctx.lineTo(520, 600);
ctx.closePath();
ctx.clip(); // 裁减区域
// 后续的绘制都只会在该区域内显示
// 注意，一旦使用了clip()，后续绘制只会出现在该区域内，且无法撤销 clip()
// 除非使用 save() 和 restore() 来回档到 clip() 之前
ctx.fillStyle = "green";
ctx.fill();

存档和回档

/*
保存当前ctx的所有状态，
当调用该方法时，此刻所有的变换矩阵、剪切区域、画笔样式（strokeStyle、fillStyle、lineWidth、lineCap、lineJoin等）、
字体样式（font、textAlign、textBaseline等）以及所有路径等都会被保存下来，直到调用restore()时回档
*/
ctx.save();

/*
恢复到最近一次save()的存档
*/
ctx.restore();

参考

Canvas 绘制虚线 setLineDash 方法说明

标题: canvas常用方法
作者: 木头的喵喵拖孩
创建于: 2024-11-12 11:37:00
更新于: 2024-11-14 14:16:15
链接: https://blog.xx-xx.top/2024/11/12/canvas常用方法/
版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。

此页目录

canvas常用方法

创建 canvas 画布
基础图形的绘制
剪切图形
存档和回档
参考