失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > html涂鸦画板插件 sketchpad-简单的HTML5 Canvas涂鸦画板插件 -HTML5功能

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

时间:2020-03-23 13:48:47

相关推荐

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

简要教程

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

安装

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

npm install sketchpad

$ bower install sketchpad --save

使用方法

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

HTML结构

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

初始化插件

你可以通过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);

来源:jQuery之家

如果觉得《html涂鸦画板插件 sketchpad-简单的HTML5 Canvas涂鸦画板插件 -HTML5功能》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。