使用canvas制作在线涂鸦画板
介绍
点击预览:在线涂鸦画板
项目源码:github地址
主要功能
调节笔颜色
点击黑色,将画笔颜色改为黑色,并且加上active类,其他颜色删除active,实现点击处高亮。
black.onclick = function () {context.strokeStyle = 'black'for (var i = 0; i < black.parentNode.children.length; i++) {black.parentNode.children[i].classList.remove('active')}black.classList.add('active')
}
调节笔粗细
点击第一个按钮,将画笔width改为3,并且加上active类,其他删除active,实现点击处高亮。
one.onclick = function () {lineWidth = 3;for (var i = 0; i < one.parentNode.children.length; i++) {one.parentNode.children[i].classList.remove('active')}one.classList.add('active')
}
清空画板
使用clearRect属性清空画板
clear.onclick = function () {context.clearRect(0, 0, yyy.width, yyy.height)
}
返回上一步
先定义一个数组canvasHistory,在鼠标松开的时候将本次保存到canvasHistory中,点击返回时将画板清空然后将上一步画板信息在canvas中画出。
主要属性
getImageData
返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据。putImageData
将图像数据(从指定的 ImageData 对象)放回画布上。
canvas.ontouchend = function () {step++;canvasHistory.push(context.getImageData(0, 0, yyy.width, yyy.height))
}
cancel.onclick = function () {if (step >= 0) {step--;context.clearRect(0, 0, yyy.width, yyy.height)context.putImageData(canvasHistory[step], 0, 0)console.log(step, context)} else {console.log('不能再继续撤销了');}
}
保存下载
将画板图案用toDataURL属性产生URL,在body创建a元素设置其href和download属性,并点击a元素开始下载
主要属性
toDataURL
返回一个包含图片展示的 data URIdownload
该属性设置一个值来规定下载文件的名称target
标签的 target 属性规定在何处打开链接文档。
_blank:浏览器总在一个新打开、未命名的窗口中载入目标文档。
save.onclick = function () {var url = yyy.toDataURL('image/png')var a = document.createElement('a')document.body.appendChild(a)a.href = urla.download = '我的画板'a.target = '_blank'a.click()
}
使用canvas制作在线涂鸦画板相关推荐
- canvas 制作简易涂鸦画板(教程)
公司大电视机是安卓系统而且系统,但因为突然无法联网又不允许第三方应用程序,但零时需要画板功能.所以就简单做个画板工具代替一下. 1.在canvas中获取光标坐标 获取坐标的代码很简单: <!DO ...
- 在线涂鸦画板小程序源码
简介: 一款功能简单的在线涂鸦画板小程序源码,可以二次开发 网盘下载地址: http://kekewangLuo.net/VsCTzCLAOVM0 图片:
- 在线绘画,在线画图,在线涂鸦画板
功能地址 地址:https://tool.toforu.com/f/tuya.html 功能说明 在线绘画,在线画图,在线涂鸦画板. 功能使用 相关知识 在线绘画指的是使用鼠标或键盘等工具在电脑屏幕上 ...
- 使用canvas制作在线画板
canvas绘图的强大功能,让人前仆后继的去研究它.代码全部加起来不足百行.还用到了h5中的<input type="color"/>和<input type=& ...
- Canvas制作简易涂鸦板
使用canvas可以做到许多意想不到的功能,尤其动画方面,这次在vue项目中使用canvas制作一个简易涂鸦板 1. html部分代码 <template><div id=" ...
- 【微信小程序】使用canvas制作在线画板,清除与保存
参考:微信小程序实现在线画板https://blog.csdn.net/IT_czh/article/details/84623110 wxml <!--index.wxml--> < ...
- canvas制作在线画板
上效果图 <template><canvas ref="canvas" class="canvas" width="800" ...
- vue页面绘图_利用vue制作在线涂鸦板
效果展示 Canvas API简介 调用方法 getImageData() 返回ImageData对象,该对象为画布上指定的矩形复制像素数据 putImageData() 把图像数据(从指定的 Ima ...
- vue canvas插件_基于vue.js 制作在线桌椅定制选择交互特效源码
码农那点事儿 关注我们,一起学习进步 基于vue.js写的在线桌子椅子垫子选择拼成的自己理想的书桌椅图像,这是一款交互式的课桌椅在线定制选择功能.非常不错,感兴趣的朋友前来下载使用. 下载源码(提取码 ...
- html5在线制作教程,HTML5 Canvas 制作动画
HTML5 Canvas 制作动画 在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果. 在线示例 要在HTML5画布上绘制 ...
最新文章
- bootstrap4 调整元素之间距离
- 存储过程中引用的常规表,临时表以及表变量是否会导致存储过程的重编译
- socket认证客户端链接合法性
- 四、构建Node Web程序
- html类名定义规则_HTML入门笔记1
- python argparse nargs_Python | 使用argparse解析命令行参数
- springboot logback 日志配置
- latex中erro:extra alignment tab has changed to\cr但列数没错的解决方法
- 数据分析学习笔记—python简单操作EXCEL
- java 异常总结_Java异常的十大问题总结
- uBLAS——Boost 线性代数基础程序库 (三)
- 计算机主机箱外面有什么区别吗,电脑主机箱后面有三个插头空 都是干什么用的啊?...
- 线性代数【五】向量(2):向量组的秩,向量内积、正交,正交规范化,向量空间
- CentOS7下初始化PostgreSQL
- java开发工程师报名费多少_JAVA软件工程师资格证书 怎么考
- js中获得月份getmonth()+1,为什么要加1?
- Python引号的用法
- 大学英语综合教程四 Unit 1 课文内容英译中 中英翻译
- SAP物料主数据编码范围配置
- 动态图解实例 ConstraintLayout Chain