sketchpad-简单的HTML5 Canvas涂鸦画板插件

当前位置:主页 > Html5库 > html5 canvas > sketchpad-简单的HTML5 Canvas涂鸦画板插件
sketchpad-简单的HTML5 Canvas涂鸦画板插件
分享:

    插件介绍

    sketchpad是一款基于HTML5 Canvas的涂鸦画板jQuery插件。它可以使用鼠标在画板上绘制各种涂鸦图案,可以修改线条的尺寸和颜色,还可以回播绘制的过程动画,以及将绘制的图案保持为Json或对象,在其它地方进行恢复操作。

    浏览器兼容性

    浏览器兼容性
    时间:2016-04-02
    阅读:
麦子学院
简要教程

sketchpad是一款基于HTML5 Canvas的涂鸦画板jQuery插件。它可以使用鼠标在画板上绘制各种涂鸦图案,可以修改线条的尺寸和颜色,还可以回播绘制的过程动画,以及将绘制的图案保持为Json或对象,在其它地方进行恢复操作。

安装

可以通过npm或bower来安装该涂鸦画板插件。

npm install sketchpad
$ bower install sketchpad --save
                

使用方法

使用该涂鸦画板插件需要引入sketchpad.css,jQuery和sketchpad.js文件。

<link rel="stylesheet" href="css/sketchpad.css">
<script src="js/jquery.min.js"></script>
<script src="js/sketchpad.js"></script>
                
HTML结构

该涂鸦画板的HTML结构使用一个<canvas>元素来制作。

<canvas class="sketchpad" id="sketchpad"><canvas>       
                
初始化插件

你可以通过new Sketchpad()来实例化一个涂鸦画板实例。

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

在得到涂鸦画板对象的引用之后,可以使用下面的方法来操作涂鸦画板。

// 撤销
sketchpad.undo();

// 重做
sketchpad.redo();

// 修改颜色
sketchpad.color = '#FF0000';

// 修改线条尺寸
sketchpad.penSize = 10;

//回播绘制的线条动画(每条线之间间隔10毫秒)
sketchpad.animate(10);                  
                

sketchpad涂鸦画板插件的github地址为:https://github.com/yiom/sketchpad

网友评论