用于绘画应用的HTML5钢笔工具

Question

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

Answer 1

我会看一下使用paper.js

http://paperjs.org/

Answer 2

是的，就像Pen Tool一样，由罗里·邓肯（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();

    }
  }
};