一、实现思路
-
（非触屏设备） 监听鼠标事件
①按下鼠标：onmousedown；滑动鼠标：onmousemove；松开鼠标：onmouseup:
②按下鼠标时，获取鼠标的x、y坐标（通过clientX、clientY获取）；
滑动鼠标时，也要先获取鼠标的x、y坐标，把滑动获取的值作为新点，再通过把新点坐标赋值给旧点坐标，鼠标滑动的同时也就连成了线；
松开鼠标时，更改画画的状态，继而引出下一个问题。 - 状态转换
- 触发事件前，一定要先判断当前状态。比如：我要开始画画，此时就把状态切换到画画状态（通过
painting = true来切换状态），画完了再切换到非画画状态（painting = false）; - 橡皮擦只有在受到点击时才会开启使用状态，所以在
click事件中切换状态；因为滑动事件有可能是在使用橡皮擦，也有可能是在使用画笔，所以要先根据橡皮擦的使用状态来判断要使用橡皮擦还是画笔； - 操作在哪个事件中使用就在哪个事件中控制状态，比如：画笔是发生在
onmouse事件中，所以在onmouse事件控制状态；橡皮擦是发生在按钮onclick事件中，所以在onclick事件控制状态。
- 画图就用
<canvas></canvas>
//HTML
<canvas id="xxx"></canvas>
//JS
var yyy = document.getElementById('xxx')
var context = yyy.getContext('2d')
//以下引用基于这里
①HTML5<canvas></canvas>标签用来通过JS绘制图像，<canvas>元素本身并没有绘制能力（它仅仅是图形的容器），需要使用脚本来完成绘图任务；
②它是inline-block元素
③通过<canvas>元素的getContext('2d')方法所返回的对象属性和方法，可用于在画布上绘制线条、矩形、圆形、文本等；一定分清哪些是属性，哪些是方法；
④还有一点需要注意的是，<canvas>的宽高不要直接设置在CSS中，要在JS中通过获取设备屏幕的宽高赋值给<canvas>的宽高；
var pageWidth = document.documentElement.clientWidth
var pageHeight = document.documentElement.clientHeight
//JS中获取页面的宽高，不止这一种方法，但这种最好记
var x = aaa.clientX
var y = aaa.clientY//表示相对于视窗口x轴、y轴的坐标长度
⑤一定要先上颜色，再绘制
content.fillstyle = 'red' //填充颜色
//绘制圆形
context.beginPath()
context.arc(x, y, radius, 0, Math.PI * 2) //表示以（x,y）为圆心，radius为半径，从0度开始，画到Math.PI * 2
context.fill()
//绘制线条
context.fillstyle = 'red' //如果上面有颜色填充，那这里可以不写
context.beginPath() //开始画
context.lineWidth = 5 //设置线条粗细
context.moveTo(x1, y1) //选一点开始画
context.lineTo(x2, y2) //画到这一点
context.stroke() //绘制已定义的路径
context.closePath() // 闭合路径，也就是创建路径
⑥常用API
-
fill():填充当前绘图路径；
stroke():绘制已定义的路径；画线条就会这个； - 填充颜色
ctx.fillStyle = 'red'；
ctx.strokeStyle = 'red'； - 清除图形
ctx.clearRect(x,y,width,height):以矩形的形状来清空；（橡皮擦和清除画布功能都能用此API来实现）
更多属性及方法参考MDN
-
（触屏设备）监听ontouch事件
①ontouchstart：开始触摸；
ontouchmove：触摸滑动；
ontouchend：结束触摸； -
如何检测是否是触屏设备呢？
用特性检测，检测是否支持ontouch特性（而不是去检测设备）
if(document.body.ontouchstart !== undefined){
//说明支持ontouch属性，是触屏设备
}else{}
浏览器中在手机模式下的控制台中输入
document.body.ontouchstart，回车，如果返回null，说明有这个特性，只是没有赋值；返回undefined，说明没有这个特性，未定义这个特性。
-
Canvas 保存到本地
①利用Canvas的API：ctx.toDataURL(type,encoderOptions)(参数可选)，它返回一个包含图片展示的data URL;
②创建生成<a>标签，把它append到body中，使其href属性为ctx.toDataURL(type,encoderOptions)，a.download = 'picture'（download 属性定义了下载链接的地址，也可以定义为下载文件的名称），最后点击<a>标签（a.click()），即完成下载。
二、代码知识
- CSS—
transform属性
①对元素应用2D、3D转换，进行移动(translate(x,y)、translate3D(x,y,z)、translateX(x)......)、缩放(scale(x,y)、scaleX(x)......)、旋转(rotate(angle)定义2D旋转......)、倾斜(skew(x-angle,y-angle))；
②负值代表向相反方向； -
@keyframes、animation与tranaform配合使用
通过 @keyframes 规则，能够创建动画，创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式，以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%，0% 是动画的开始时间，100% 动画的结束时间。
//html
<img src="..." alt="..." id = "musicIcon" title="...">
//CSS
img{
animation: aaa 1s infinite;
}
@keyframes aaa{
0%{transform:rotate(-10deg);}
50%{transform:rotate(10deg);}
100%{transform:rotate(-10deg);}
}
animation 属性是一个简写属性,它包括animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，不过一般只需要设置名字、间隔和循环次数即可
- CSS—
transition属性
①它定义了从一种样式过渡到另一种样式的方式，包括过渡的css属性名(transition-property)，过渡时间(transition-duration)，时间曲线(transition-timing-function)，从何时开始(transition-delay)，这些属性可直接简写到transition中，各个属性值间留有空格；多个CSS过渡属性可写在一起，中间用，隔开。
