html - 用于绘画应用的 HTML5 笔工具

Question

您好我正在尝试在 HTML5 中创建一个基本的绘图应用程序。有谁知道如何为 HTML5 制作钢笔工具？我已经知道如何创建基本的绘图工具，只是在钢笔工具上寻找一些帮助。任何帮助将不胜感激，谢谢。

Answer 1

我会看看使用 paper.js

http://paperjs.org/

Answer 2

是的，喜欢钢笔工具，由 Rory Duncan 原创

var clickState = 0; // keeps track of clicks
var lastClickCoords = {}; // keeps track of position last clicked

this.tool.pen = {

  "mousedown": function(e){

    if (clickState === 0) {

      this.disallowToolChange();
      self.ctx.save();

      currentLine = new Curve(this, e.offsetX, e.offsetY);

      $(self.canvas).on("mousemove", callEvent);
      clickState++;
    }
    else if (clickState === 1) {

      clickState++;
      currentLine.to(e.offsetX, e.offsetY)

    }
    else if (clickState === 2) {

      clickState = 0;
      currentLine.arc(e.offsetX, e.offsetY);
      this.push(currentLine);

      self.ctx.restore();

      $(self.canvas).off("mousemove", callEvent);
      this.allowToolChange();
    }
  },

  "mousemove": function(e){

    if (clickState === 1) {
      currentLine.to(e.offsetX, e.offsetY)
      currentLine.preview();
    }
    else if (clickState === 2) {
      currentLine.arc(e.offsetX, e.offsetY);
      currentLine.preview();

    }
  }
};