Canvas画板

一、实现思路

1. （非触屏设备） 监听鼠标事件
   ①按下鼠标：onmousedown；滑动鼠标：onmousemove；松开鼠标：onmouseup:
   ②按下鼠标时，获取鼠标的x、y坐标（通过clientX、clientY获取）；
   滑动鼠标时，也要先获取鼠标的x、y坐标，把滑动获取的值作为新点，再通过把新点坐标赋值给旧点坐标，鼠标滑动的同时也就连成了线；
   松开鼠标时，更改画画的状态，继而引出下一个问题。
2. 状态转换

• 触发事件前，一定要先判断当前状态。比如：我要开始画画，此时就把状态切换到画画状态（通过painting = true来切换状态），画完了再切换到非画画状态（painting = false）;
• 橡皮擦只有在受到点击时才会开启使用状态，所以在click事件中切换状态；因为滑动事件有可能是在使用橡皮擦，也有可能是在使用画笔，所以要先根据橡皮擦的使用状态来判断要使用橡皮擦还是画笔；
• 操作在哪个事件中使用就在哪个事件中控制状态，比如：画笔是发生在onmouse事件中，所以在onmouse事件控制状态；橡皮擦是发生在按钮onclick事件中，所以在onclick事件控制状态。

3. 画图就用

//HTML

//JS
var yyy = document.getElementById('xxx')
var context = yyy.getContext('2d')
//以下引用基于这里

①HTML5标签用来通过JS绘制图像，元素本身并没有绘制能力（它仅仅是图形的容器），需要使用脚本来完成绘图任务；
②它是inline-block元素
③通过元素的getContext('2d')方法所返回的对象属性和方法，可用于在画布上绘制线条、矩形、圆形、文本等；一定分清哪些是属性，哪些是方法；
④还有一点需要注意的是，的宽高不要直接设置在CSS中，要在JS中通过获取设备屏幕的宽高赋值给的宽高；

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

4. （触屏设备）监听ontouch事件
   ①ontouchstart：开始触摸；
   ontouchmove：触摸滑动；
   ontouchend：结束触摸；
5. 如何检测是否是触屏设备呢？
   用特性检测，检测是否支持ontouch特性（而不是去检测设备）

if(document.body.ontouchstart !== undefined){
//说明支持ontouch属性，是触屏设备
}else{}

浏览器中在手机模式下的控制台中输入document.body.ontouchstart，回车，如果返回null，说明有这个特性，只是没有赋值；返回undefined，说明没有这个特性，未定义这个特性。

6. Canvas 保存到本地
   ①利用Canvas的API：ctx.toDataURL(type,encoderOptions)(参数可选)，它返回一个包含图片展示的data URL;
   ②创建生成标签，把它append到body中，使其href属性为ctx.toDataURL(type,encoderOptions)，a.download = 'picture'（download 属性定义了下载链接的地址，也可以定义为下载文件的名称），最后点击标签（a.click()），即完成下载。

二、代码知识

1. 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))；
   ②负值代表向相反方向；
2. @keyframes、animation与tranaform配合使用
   通过 @keyframes 规则，能够创建动画，创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式，以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%，0% 是动画的开始时间，100% 动画的结束时间。

//html
 
//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，不过一般只需要设置名字、间隔和循环次数即可

3. CSS—transition属性
   ①它定义了从一种样式过渡到另一种样式的方式，包括过渡的css属性名(transition-property)，过渡时间(transition-duration)，时间曲线(transition-timing-function)，从何时开始(transition-delay)，这些属性可直接简写到transition中，各个属性值间留有空格；多个CSS过渡属性可写在一起，中间用，隔开。