02Canvas 画板

1、功能描述
实现画画功能，并可切换画笔颜色、细条粗细。可保存、清空画板。

2、思路
创建画板——》监听鼠标（触屏）事件——》绘制路线

3、具体操作
3.1 创建画板
通过canvas创建画板

创建画板
3.2 监听鼠标（触屏）事件
监听鼠标（触屏）事件，当鼠标按下（触屏）时进行绘画，根据鼠标（手指）移动路线绘制，松开鼠标（手指离屏）时停止绘画。

监听触屏事件
3.3 绘制路线
通过点与线的连接，实现绘画功能。

绘制路线
4、相关知识点
4.1 js
监听鼠标点击事件
按下去鼠标：document.onmousedown =function(x){console.log(x)}

        移动鼠标：document.onmousemove = function(y){console.log(y)}

        松开鼠标：document.onmouseup = function(z){console.log(1)}

    监听触摸事件（因为手机上没有mouse所以用touch）       
         开始触摸：canvas.ontouchstart = function(aaa){}

         结束触摸：canvas.ontouchend = function(aaa){}

         边摸边动：canvas.ontouchmove = function(aaa){}

    通过特性检测得知是用mouse还是touch
            方法1：

                 如果设备支持 ontouchstart，结果是null

                 如果设备不支持ontouchstart，结果是undefined

            方法2：

                 移动端：‘ontouchstarts’  in  document.body——》true

                 手机端：‘ontouchstarts’  in  document.body——》false

                 特性检测：document.body.ontouchstart

                 触屏设备：canvas.ontouchstart

                 非触屏设备：canvas.onmousedown

    touch时把当前所有touch事件都存到了touches中，所以从touches[0]中获取坐标 
    用div画画
        首先获取鼠标在视图上的x、y，然后生成1个div，并设置div的样式，最后将div放到画板（div）中。即可打点。

        缺点：元素画画只能画点，没办法连线。

    用canvas画画
         矩形

            获取画板                  var yyy =document.getElementById(‘xxx’);

            获取2d上下文          var context =yyy.getContext(“2d”);

            填充样式                  context.fillStyle = ‘red’;

            填充、描边矩形       context.fillRect(0,0,100,100);

            描边样式                  context.strokeStyle= ‘yellow’;

            描述矩形                  context.strokeRect(10,0,100,100);

            清除                         context.clearRect(50,50,60,60);

        画线

              开始                       context.beginPath();

              起点                       context.moveTo(80,80);

              画线                       context.lineTo(100,80);

              结束                       context.fill();

        画圆

             开始                        context.beginPath()

             画圆                        context.arc(150,150,半径,开始角度,结束角度)

             结束                        context.fill()

        点与线连起来

             出现第1个点第2个点的时候之间连个线，即mouseDown的时候为第1个点，mouseMove的时候为第2个点。并每次记录上1个点。

    获取页面宽高
                 document.documentElement.clientWidth

                 document.documentElement.clientHeight

    一个按钮只做一件事
    让页面缩放
            content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>

    in操作符
          varhash = {a:1,b:2,c:3}

          ‘a’in hash——》true

          ‘d’in hash——》false

    禁止滚动条                            overflow:hidden

    在移动端让canvas不移动     绝对定位position:fixed; top:0; left:0;

5、实际成果