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
- 新元素 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。
-
设置橡皮擦和画笔 使用状态
 ](https://upload-images.jianshu.io/upload_images/16030088-4053a55d9c5cd5ed.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
设置两个button用一个div包起来。 div要设置成display：fixed。 然后在className为actions是 设置橡皮擦可见。在className为cations x时，设置画笔可见。
