web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置：
首页
>
网页特效
>
canvas
sketchpad-简单的HTML5 Canvas涂鸦画板插件
分类：
canvas
日期：
2024-05-14
点击(2)
评论(0)
演 示
免费下载
简介
使用该涂鸦画板插件需要引入sketchpad.css，jQuery和sketchpad.js文件。 ```html <link rel="stylesheet" href="css/sketchpad.css"> <script src="js/jquery.min.js"></script> <script src="js/sketchpad.js"></script> ``` ##### HTML结构 该涂鸦画板的HTML结构使用一个canvas元素来制作。 ```html <canvas class="sketchpad" id="sketchpad"><canvas> ``` ##### 初始化插件 你可以通过new Sketchpad()来实例化一个涂鸦画板实例。 ```html var sketchpad = new Sketchpad({ element: '#sketchpad', width: 400, height: 400, }); ``` 在得到涂鸦画板对象的引用之后，可以使用下面的方法来操作涂鸦画板。 ```javascript // 撤销 sketchpad.undo(); // 重做 sketchpad.redo(); // 修改颜色 sketchpad.color = '#FF0000'; // 修改线条尺寸 sketchpad.penSize = 10; //回播绘制的线条动画（每条线之间间隔10毫秒） sketchpad.animate(10); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告
