转载

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

简要教程

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之家

原文 http://www.html5cn.org/article-9480-1.html

正文到此结束

所属分类：编程技术

本文标签： 安装 json 实例 js HTML https HTML5 git GitHub 下载 ip CSS http UI src jquery 插件
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二