【题目】【8天】canvas画板

Xufc 发布于2019-08-22 17:09 / 484人阅读

摘要：和监听用户是否在绘画。再绘画不在绘画。监测用户是在使用橡皮檫，是在使用橡皮擦，停止使用铅笔。使用，会变为使用，后面会增加一个属性值。的作用是获取宽度也就是宽度移动端支持多点触控，所以要获取需要加上，表示第一个值

canvas画板，比较简易，目前还有很多bug
1、手机端上下会晃动
2、下载按钮微信上没法用
3、下载后背景色是透明
4、切换成橡皮擦后，需要先点铅笔才能绘画，不能直接点颜色




    
    Title

JS代码

总结：
1、按下鼠标和移动鼠标后它们中间会有空隙，解决方法：用线连接鼠标移动前后的两点。lasePoint和newPoint
2、painting = false监听用户是否在绘画。true再绘画false不在绘画。
3、eraserEnable = false;监测用户是在使用橡皮檫，true是在使用橡皮擦，停止使用铅笔。
4、判断用户是使用pc还是手机，需要监测是否有touch事件，如果有，首先使用touch事件；在pc端document.body.ontouchstart === undefined，在移动端是null，只要不等于undefined就可以确定是移动端。
5、状态切换，不直接修改css里面内容，通过js切换class来实现状态切换。比如：上面橡皮擦和铅笔的切换。
6、使用x.className = "active"，class会变为active；使用x.classList.add("active")，class后面会增加一个属性值active。
7、document.documentElement.clientWidth的作用是获取document宽度（也就是viewport宽度）
8、移动端支持多点触控，所以要获取clientX需要加上touches[0]，表示touch第一个值

私有云专线服务画板尺寸绘画板画板 Canvas

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94902.html

Day08 - HTML5 Canvas 实现彩虹画笔绘画板指南

摘要：实现彩虹画笔绘画板指南作者简介是推出的一个天挑战。这部分不涉及内容，全部由来实现。实现彩虹画笔绘画板效果图项目源码分析源码获取节点支持不支持彩虹效控制笔触大小控制绘制路径源码分析宽高设置属性笔触的形状，有圆平方三种。 Day08 - HTML5 Canvas 实现彩虹画笔绘画板指南作者：©liyuechun 简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑...

Ajian 2019-08-20 18:18 评论0 收藏0
使用Canvas和JavaScript做一个画板

摘要：本文同步于个人博客前些天学习了的元素，今天就来实践一下，用做一个画板。实现一个简单的画板实现思路监听鼠标事件，用方法把记录的数据画出来。为时，移动鼠标使用剪裁擦除画布。本文同步于个人博客：https://zhoushuo.me/blog/2018/03/11/drawing-borad/ 前些天学习了HTML5的元素，今天就来实践一下，用canvas做一个画板。 showImg(ht...

asce1885 2019-08-22 15:25 评论0 收藏0
canvas 简易像素画板

摘要：个人博客库下载大致思路自己画随机传入对象和参数可不传参数背景色默认填充色默认方块大小默认方法清除所有方块随机生成多少个方块增加鼠标点击移动绘画实例库使用个人博客 http://taoquns.com/paper/59ba...github https://github.com/Taoqun/can...download 库下载canvas.toDataURL https://gi...

UnixAgain 2019-08-20 16:07 评论0 收藏0