纯js网页画板(Graphics)类简介及实现代码

那么我们来详细讲解一下“纯js网页画板(Graphics)类简介及实现代码”的攻略。

简介

Graphics 类是一个封装了浏览器 Canvas 的工具类，它提供了一些方法，使用户能够在 Canvas 上进行绘图。

实现代码

初始化

首先，我们要定义一个 Graphics 类，可以使用 ES6 的类语法来实现：

class Graphics {
  constructor(element) {
    this.element = element;
    this.ctx = element.getContext('2d');
  }

  // ...
}

在构造函数中，我们传入一个 DOM 元素 element，并使用它的 getContext('2d') 方法获取画板上下文 ctx。

setLineWidth

接下来，我们实现一个可以设置画笔宽度的方法 setLineWidth：

setLineWidth(lineWidth) {
  this.ctx.lineWidth = lineWidth;
}

setLineColor

再实现一个可以设置画笔颜色的方法 setLineColor：

setLineColor(color) {
  this.ctx.strokeStyle = color;
}

startDraw

实现一个开始画图的方法 startDraw：

startDraw(x, y) {
  this.ctx.beginPath();
  this.ctx.moveTo(x, y);
}

continueDraw

定义一个继续画图的方法 continueDraw：

continueDraw(x, y) {
  this.ctx.lineTo(x, y);
  this.ctx.stroke();
}

示例说明

在实现了以上几个方法之后，我们就可以创建一个画板了。我们先来看一个简单的示例：

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

const element = document.getElementById('canvas');
const graphics = new Graphics(element);

graphics.setLineWidth(5);
graphics.setLineColor('red');

element.addEventListener('mousedown', (event) => {
  const x = event.offsetX;
  const y = event.offsetY;

  graphics.startDraw(x, y);

  element.addEventListener('mousemove', moveHandler);
});

function moveHandler(event) {
  const x = event.offsetX;
  const y = event.offsetY;

  graphics.continueDraw(x, y);
}

element.addEventListener('mouseup', (event) => {
  element.removeEventListener('mousemove', moveHandler);
});

以上代码做了以下几个事情：

1. 获取了一个 id 为 canvas 的 DOM 元素。
2. 使用 Graphics 类创建了一个画板。
3. 设置了画笔宽度和颜色。
4. 给画板添加了 mousedown 事件监听器，当鼠标按下时开始画图。
5. 在 mousedown 事件监听器中调用了 startDraw 方法，开始画图。
6. 在 mousemove 事件监听器中调用了 continueDraw 方法，继续画图。
7. 在 mouseup 事件监听器中移除了 mousemove 事件监听器，当鼠标松开时停止画图。

以上代码实现的效果是鼠标按下后，可以在画板上如同用笔一样画出线条，并且线条是红色的，宽度为 5。