一个简单且支持触摸的jQuery绘图插件，允许您创建一个草图板，在浏览器中使用鼠标和触摸手势进行绘制。

使用jQuery库和HTML5画布构建。请随时下载并在您的下一个项目中使用它，通过触摸支持提供流畅的绘图体验。

更多功能：

• 重做
• 打开
• 为画板笔划制作动画
• 自定义笔划颜色和大小
• 导出为JSON或JavaScript对象。

如何使用它:

1.安装和下载。

# NPM
$ npm i sketchpad

2.导入Sketchpad库。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/scripts/sketchpad.js"></script>

// OR
import Sketchpad from './lib/sketchpad.js';

3.为画板创建一个HTML画布元素。

<canvas id="example">
  
</canvas>

4.初始化画板。

var sketchpad = new Sketchpad({
    element: '#example',
    width: 600,
    height: 450,
});

5.自定义笔划颜色和大小。

// hex color
sketchpad.color = '#000000';
 
// in pixels
sketchpad.penSize = 10;

6.以给定的速度为笔划制作动画。

sketchpad.animate(10);

7.撤消并重做。

sketchpad.undo();
sketchpad.redo();

8.将笔划导出为JSON或JavaScript对象。

sketchpad.toJSON();
sketchpad.toObject();

9.从JSON或JavaScript对象导入笔划。

var myData = sketchpad.toObject();
myData.element = '#sketchpad2'
var sketchpad2 = new Sketchpad(settings);

预览截图

jQuery和Canvas 移动友好型Sketchpad.js