HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 应用推荐 HTML5应用 查看内容

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

2016-4-5 10:35| 发布者: admin| 查看: 2465| 评论: 0|来自: jQuery之家

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

  简要教程

  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

 

  来源:jQuery之家

更多

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-3-30 19:08

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部