web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置：
首页
>
网页特效
>
canvas
基于Canvas的Photoshop样式网页涂鸦板插件
分类：
canvas
日期：
2024-05-14
点击(1)
评论(0)
演 示
免费下载
简介
在页面中引入下面的文件。 ```html <link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/3.6.95/css/materialdesignicons.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="dist/jquery.drawr.combined.js"></script> ``` ##### HTML结构 ```html <div id="canvas"></div> ``` ##### 初始化插件 ```html $(function(){ $("#canvas").drawr(); }); ``` ##### 配置参数 - canvas_width：画布的宽度。 - canvas_height：画布的高度。 - enable_tranparency：画布是否显示透明的背景。 - undo_max_levels：设置可以undo的次数。 - color_mode：指定演示拾取模式。 - clear_on_init：是否在初始化时清空画布。 ##### 方法 - start：开始画图模式。 - stop：结束画图模式。 - load：加载一张图片到画布上。 - export：导出画布为一张图片。 - button：添加自定义的按钮。 - destroy：销毁画布。 ```html $("#canvas").drawr("start"); $("#canvas").drawr("stop"); $("#canvas").drawr("load", file); $("#canvas").drawr("export", "image/jpeg"); $("#canvas").drawr("button", { "icon":"mdi mdi-content-save mdi-24px" }) $("#canvas").drawr("destroy") ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告
