canvas画板所学

1.学到的新API
1.1 鼠标监听
document.onmousedown = function (xxx) {} //鼠标按下
document.onmousemove = function (xxx) {} // 鼠标移动
document.onmouseup = function (xxx) {} //鼠标松开
1.2 获取鼠标坐标（位置）
var x = xxx.clientX, var y = xxx.clientY

2. 新元素 canvas
   2.1 <canvas id="canvas"></canvas> 默认样式为inline-block。它只有width和height两个属性。当没有设置的时候，它初始化成宽300px高150px。
   2.2 设置全屏canvas：
   function autosetcanvas(canvas){
   setcanvasSize()
   window.onresize = function(){
   setcanvasSize()
   }
   function setcanvasSize(){
   var pageWidth = document.documentElement.clientWidth;
   var pageHeight = document.documentElement.clientHeight;
   canvas.width = pageWidth;
   canvas.height = pageHeight;
   }
   }
   html的body本身有margin，可以把body的margin设置成0，这样就不会有鼠标点击画板的坐标和实际出现的坐标不一样的bug。
   2.3 画图案
   画圆：function drawCircle(x,y,radius){
   context.beginPath()
   context.fillStyle = 'black'
   context.arc(x,y,radius,0,Math.PI*2)
   context.fill()
   }
   画线：function drawLine(x1,y1,x2,y2){
   context.beginPath();
   context.strokeStyle = 'black'
   context.moveTo(x1,y1)
   context.lineWidth = 5
   context.lineTo(x2,y2)
   context.stroke()
   context.closePath()
   }
   fill是填充，stroke是描边。先给颜色，再开始画。 其他图案绘制可参考Canvas MDN

2.4 消除鼠标移动过快，画出来的线不连续。 在onmousedown里var一个初始点，点的坐标就是鼠标的x，y坐标。在onmousemove里var一个移动点，坐标也是鼠标的x，y。 然后用这两个点画一条线x1=初始点.x y1=初始点.y x2=移动点.x y2=移动点.y 最最重要的一句，要使初始点=移动点。不然会出现初始点只有一个和无数个一动点连线的bug。

3. 设置橡皮擦和画笔 使用状态

   
    ](https://img.haomeiwen.com/i16030088/4053a55d9c5cd5ed.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
   

   设置两个button用一个div包起来。 div要设置成display：fixed。 然后在className为actions是 设置橡皮擦可见。在className为cations x时，设置画笔可见。