JS操作dom做一个画笔
JS操纵dom是非常不可取的,会导致用起来卡卡的，画图需要用canvas
Canvas
- Canvas标签只有两个属性—— width和height
- Canvas支持使用CSS来定义大小，但会出现扭曲模糊失真
代码示例
Canvas宽高要用JS去操纵tag属性width和height
- 不能通过CSS属性去写，会产生拉伸导致图片模糊
- 从前web根本没有css，只有html，canvas和img类似是以html属性的方式控制宽高的
let canvas = document.getElementById("canvas");
// document.documentElement返回的是<html></html>
canvas.width = document.documentElement.clientWidth; //这两句才能有效设置canvas全屏
canvas.height = document.documentElement.clientHeight;
// 此外还要配合上css的 canvas { display:block }
- 控制台中调试document.documentElement.clientWidth值的时候注意网页缩放务必是100%；
- 不然会产生与document.documentElement.clientWidth与chrome调出控制台后网页右上角数值不匹配
图形绘制
canvas图形绘制分两类
- 绘制矩形
- 绘制图形 --- 除矩形以外的别的图形都需要手动去绘制 摘自MDN
绘制矩形
- fillRect 绘制一个填充的矩形
- strokeRect 绘制一个矩形的边框
- clearRect 清除指定矩形区域，让清除部分完全透明。
绘制图形就是绘制路径
- 绘制图形需要先绘制路径
- 每个图形都是闭合的
- 路径是由很多子路径构成，这些子路径都是在一个列表中
- 一旦路径生成，你就能通过描边或填充路径区域来渲染图形
beginPath()
- 新建一个路径列表
- 每次这个方法调用之后，路径列表会清空重置，然后就可以重新绘制新的图形
- beginPath()后通常接moveTo()几乎总是要在设置路径之后专门指定你的起始位置
closePath()
- 闭合路径之后图形绘制命令又重新指向到上下文中
- 闭合路径不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形
stroke()
- 通过线条来绘制图形轮廓
- 不会自动闭合图形
fill()
- 通过填充路径的内容区域生成实心的图形
- 调用fill()函数时，所有没闭合的形状会自动闭合，所以不需要调用closePath()函数。但是调用stroke()时不会自动闭合
检测当前设备是触控屏还是用鼠标的
- 能通过检测触控屏事件的存在与否以判断一款浏览器是否支持触控屏
- ontouchstart，ontouchmove，ontouchend，ontouchcancel 四个事件之一即可
"ontouchend" in document // 判断document对象中是否有以上四大属性
document.hasOwnProperty("ontouchstart") // 同上，第二种写法
// console.dir(document) 由此方式可以直接观察document节点是否有四大属性
逻辑:
mouse 事件是所有浏览器都支持的，但触屏手机也可通过 USB OTG 外接鼠标,因此无法通过判断是否有mouse事件来判断这是触控屏还是手机
