JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)

2023年6月10日下午7:23 • JavaScript

下面是对“JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)”的完整攻略：

1. 介绍

本篇攻略将介绍如何使用JS基于ocanvas插件实现简单画板效果，并附带demo源码下载。ocanvas是HTML5 Canvas的一个扩展库，它提供了更简单、更易用的API，并且可以方便地实现一些高级功能。

2. 前置条件

在开始使用ocanvas前，需要先将它引入到html文件中。可以从其官网或github仓库下载ocanvas，或者通过javascript库管理工具如npm、yarn安装。这里我们直接引入ocanvas的CDN文件：

<script src="https://cdn.jsdelivr.net/npm/ocanvas@2.8.1/dist/ocanvas.min.js"></script>

3. 实现简单的画板效果

下面我们来实现一个简单的画板：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/ocanvas@2.8.1/dist/ocanvas.min.js"></script>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    oCanvas.init({
      canvas: "#canvas",
      background: "#fff",
      width: 500,
      height: 500
    });

    var brush = oCanvas.create({
      type: "shape",
      stroke: "red",
      lineWidth: 5,
      x: 250,
      y: 250,
      radius: 5,
      draw: function () {
        this.beginPath();
        this.arc(0, 0, this.radius, 0, Math.PI * 2, false);
        this.stroke();
        this.closePath();
      }
    });

    brush.dragAndDrop(true);

    var isPainting = false;
    brush.bind("pointerdown", function () {
      isPainting = true;
    });
    brush.bind("pointerup", function () {
      isPainting = false;
    });
    brush.bind("pointermove", function () {
      if (isPainting) {
        var paintPoint = oCanvas.getCanvas().getPointer(oCanvas.getCanvas().e);
        var paintbrush = oCanvas.display.ellipse({
          x: paintPoint.x,
          y: paintPoint.y,
          origin: { x: "center", y: "center" },
          radius: { x: brush.radius, y: brush.radius },
          stroke: brush.stroke,
          fill: brush.stroke,
          lineWidth: brush.lineWidth
        });
        oCanvas.addChild(paintbrush);
      }
    });
  </script>
</body>
</html>

我们可以看到，画布大小为500x500，画笔的颜色为红色，宽度为5，半径为5。使用dragAndDrop方法让笔刷变为可拖拽状态，并通过绑定事件监听器实现了简单的绘图功能。

4. 示例说明

（1）使用橡皮擦功能

var eraser = oCanvas.create({
  type: "shape",
  stroke: "#fff",
  lineWidth: 10,
  x: 250,
  y: 250,
  radius: 20,
  draw: function () {
    this.beginPath();
    this.arc(0, 0, this.radius, 0, Math.PI * 2, false);
    this.stroke();
    this.closePath();
  }
});

brush.bind("dblclick", function () {
  brush.destroy();
  eraser.x = brush.x;
  eraser.y = brush.y;
  oCanvas.addChild(eraser);
});
eraser.bind("dblclick", function () {
  eraser.destroy();
  brush.x = eraser.x;
  brush.y = eraser.y;
  oCanvas.addChild(brush);
});

以上代码可实现橡皮擦功能。当笔刷被双击时，销毁笔刷并新建一个橡皮擦对象，反之销毁橡皮擦并新建笔刷。

（2）实现撤销功能

var doneActions = [];
var undoneActions = [];

oCanvas.draw = function () {
  if (doneActions.length > 0) {
    for (var i = 0; i < doneActions.length; i++) {
      oCanvas.addChild(doneActions[i]);
    }
  }
  if (undoneActions.length > 0) {
    for (var i = 0; i < undoneActions.length; i++) {
      oCanvas.addChild(undoneActions[i]);
    }
  }
};
oCanvas.clearCanvas = function () {
  doneActions = [];
  undoneActions = [];
};

brush.bind("pointerup", function () {
  doneActions.push(this.clone({ properties: ["x", "y", "stroke", "fill", "radius", "lineWidth"] }));
  undoneActions = [];
});

document.addEventListener("keydown", function (event) {
  if (event.metaKey && event.keyCode === 90) {
    event.preventDefault();
    if (event.shiftKey) {
      var redoAction = undoneActions.pop();
      if (redoAction) {
        doneActions.push(redoAction);
        oCanvas.redraw();
      }
    } else {
      var lastAction = doneActions.pop();
      if (lastAction) {
        undoneActions.push(lastAction);
        oCanvas.redraw();
      }
    }
  }
});

以上代码可实现撤销功能。利用doneActions和undoneActions数组分别保存已完成和撤销的操作。当触发pointerup事件时，将克隆好的绘图对象保存至doneActions。同时，通过keydown事件和键盘快捷键实现撤销和重做操作。