日中杂记——canvas-易微帮

- - 获取画笔
  - moveTo()
  - lineTo()
  - stroke()
  - closePath()
  - fill()
  - fillRect()
  - strokeRect()
  - arc()
  - drawImage()
  - clip()
  - clearRect()
  - beginPath()
  - save()
  - restore()
  - 变换
  - 线型
  - 文本
  - 样式
  - 阴影
  - 用例
  - - 绘制线段
    - 绘制网格
    - 改变旋转中心
    - 绘制时钟
    - - Template
      - Script

<canvas id="canvas" width="600" height="600"></canvas>

宽高只能通过canvas对象的属性来设置，不能通过css来设置

获取画笔

canvas.getContext(‘2d’)

getContext()方法：获取渲染上下文和绘画功能。2d图像，就传入参数’2d’

let canvas: any = document.getElementById('canvas');
let pen = canvas.getContext('2d');

moveTo()

起点

pen.moveTo(100, 100);

lineTo()

轨迹

上一次的终点是下一次轨迹的起点

pen.lineTo(200, 100);
pen.lineTo(200, 200);

stroke()

沿着轨迹绘制

pen.stroke();

closePath()

从终点连接到起点

pen.closePath();

fill()

闭合路径并填充颜色

pen.fill()

fillRect()

绘制一个填充矩形

fillRect(x, y, width, height)

strokeRect()

绘制一个矩形边框

pen.strokeRect(x, y, width, height);

arc()

绘制一段圆弧路径

pen.arc(x, y, radius, startAngle, endAngle, anticlockwise)

弧度值 = 角度值 * Math.PI / 180

x：圆弧中心（圆心）的 x 轴坐标。
y：圆弧中心（圆心）的 y 轴坐标。
radius：圆弧的半径。
startAngle：圆弧的起始角度（弧度值），x 轴方向开始计算。
endAngle：圆弧的结束角度（弧度值）。
anticlockwise：（可选）定义绘制的方向。
- true：逆时针绘制圆弧
- false：顺时针绘制圆弧（默认）

drawImage()

绘制图像

在这里插入图片描述

pen.drawImage(image, dx, dy)
pen.drawImage(image, dx, dy, dWidth, dHeight)
pen.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

image：绘制图片的dom对象。
dx：

image 的左上角在目标画布上 X 轴坐标。
dy：

image 的左上角在目标画布上 Y 轴坐标。
dWidth：

image 在目标画布上绘制的宽度。允许对绘制的 image 进行缩放。如果不说明，在绘制时 image 宽度不会缩放。
dHeight：

image 在目标画布上绘制的高度。允许对绘制的 image 进行缩放。如果不说明，在绘制时 image 高度不会缩放。
sx：(可选)
需要绘制到目标上下文中的，image 的矩形（裁剪）选择框的左上角 X 轴坐标。
sy：(可选)
需要绘制到目标上下文中的，image 的矩形（裁剪）选择框的左上角 Y 轴坐标。
sWidth：(可选)
需要绘制到目标上下文中的，image 的矩形（裁剪）选择框的宽度。如果不说明，整个矩形（裁剪）从坐标的 sx 和 sy 开始，到 image 的右下角结束。
sHeight：(可选)
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的高度。使用负值将翻转这个图像。

  let img = new Image();
  img.src = require('./imgs/clock-bg.jpg');
  img.onload = function () {
    // 绘制图片
    pen.save();
    pen.drawImage(img, 0, 50);
    pen.restore();
  }

clip()

将当前创建的路径设置为当前剪切路径的方法。

浏览器会将所有的绘图操作都限制在本区域内执行。在默认情况下，剪辑区域的大小与Canvas画布大小一致。

  let img = new Image();
  img.src = require('./imgs/clock-bg.jpg');
  img.onload = function () {
    pen.save();
    pen.beginPath();
      
    pen.arc(center.x, center.y, r, 0, 2 * Math.PI);
    // pen.fill();
    // 将上面的区域作为剪辑区域
    pen.clip();
      
    pen.drawImage(img, 0, 50);
    pen.restore();
  }

clearRect()

清除指定矩形区域，让清除部分完全透明。

pen.clearRect(x, y, width, height)

beginPath()

开始一个新的路径

pen.beginPath()

save()

保存画布状态

pen.save()

restore()

恢复save()保存的状态

pen.restore()

变换

rotate(angle)：旋转
- angle顺时针旋转的弧度。弧度值 = 角度值 * Math.PI / 180。
- 旋转中心点是(0,0)，可以通过translate()转换来改变中心点
scale()：放大缩小
translate()：平移

线型

lineWidth：线的宽度。默认1
lineCap：线末端的类型。允许的值： butt (默认), round, square.
lineJoin：两线相交拐点的类型。允许的值：round, bevel, miter(默认)。

文本

fillText(text, x, y, [maxWidth])：
- text：使用当前的 font, textAlign, textBaseline 和 direction 值对文本进行渲染。
- x：文本起点的 x 轴坐标。
- y：文本起点的 y 轴坐标。
- maxWidth（可选）：绘制的最大宽度。超出宽度会缩放字体。
```
pen.font = "48px serif";
pen.fillText("Hello world", 50, 100);
```
strokeText()：在 (x,y) 位置绘制（描边）文本。

样式

font：当前字体样式的属性。

pen.font = "10px sans-serif"; // 默认值

textAlign：文本对齐设置。允许的值： start (默认), end, left, right 或 center.
direction：文本的方向。允许的值： ltr, rtl, inherit (默认).
fillStyle：图形内部的颜色和样式。默认 #000 (黑色).
strokeStyle：图形边线的颜色和样式。默认 #000 (黑色).

阴影

shadowColor：阴影的颜色。默认 fully-transparent black.
shadowBlur：模糊效果。默认 0
shadowOffsetX：阴影水平方向的偏移量。默认 0.
shadowOffsetY：阴影垂直方向的偏移量。默认 0.

  pen.shadowColor = 'rgba(0, 0, 0, 0.35)';
  pen.shadowBlur = 20;
  pen.shadowOffsetX = -12;
  pen.shadowOffsetY = 20;

用例

绘制线段

  pen.moveTo(100, 100);
  pen.lineTo(200, 100);
  pen.lineTo(200, 200);
  pen.stroke();

绘制网格

  // 绘制网格
  const step = 100;
  const h = 600;
  const w = 300;
  const w_l = w / step;
  const h_l = h / step;

  // 横着的线
  for (let i = 0; i <= h_l; i++) {
    pen.beginPath();
    pen.moveTo(0, i * step);
    pen.lineTo(w, i * step);
    pen.stroke();
  }
  // 竖着的线
  for (let i = 0; i <= w_l; i++) {
    pen.beginPath();
    pen.moveTo(i * step, 0);
    pen.lineTo(i * step, h);
    pen.stroke();
  }

改变旋转中心

/**
 * canvas旋转中心偏移值
 * @param width canvas宽
 * @param center 中心坐标点 center:{x:100,y:100}
 * @param arc 旋转的弧度值
 */
function rotateOriginOffset(
  width: number,
  center: { x: number; y: number },
  arc: any
) {
  const r1 = width - center.x;
  const xRes1 = Math.cos(arc) * r1;
  const yRes1 = Math.sin(arc) * r1;
  const x1 = center.x + xRes1;
  const y1 = center.y + yRes1;

  const x0 = width;
  const y0 = center.y;
  const c0 = Math.sqrt(Math.pow(x0, 2) + Math.pow(y0, 2));
  const arc0 = Math.atan2(y0, x0);
  const arc_0 = arc0 + arc;
  const y2 = Math.sin(arc_0) * c0;
  const x2 = y2 / Math.tan(arc_0);

  const xLength = x1 - x2;
  const yLength = y1 - y2;
  return {
    x: xLength,
    y: yLength,
  };
}

  const offset = rotateOriginOffset(width, center, arc);
  pen.translate(offset.x, offset.y); // 改变旋转中心
  pen.rotate(arc);

绘制时钟

CodePen在线查看

这个用例基本把上面的方法都用了一遍。
使用到的框架是QuasarCLI
vue3+quasar2.0+ts