什么是<canvas>：
<canvas>是HTML5新定义的标签，可以通过脚本（比如JavaScript）来绘制图形，它可以用来绘制图形，制作照片，创建动画等。简单的说，canvas就是我们的画布，在电脑上，鼠标就是我们的画笔，在手机上，手指就是我们的画笔。
默认情况下canvas是没有边框与内容的，默认是一个宽300高150的画布。我们可以在canvas标签内设置它的宽高，切记，不能在CSS内设置宽高，因为在CSS内设置的宽高是按照默认宽高等比缩放的。
getContext()：
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d')；
代码的第一行使用'document.getElementById() 方法来为 <canvas>素得到DOM对象。一旦有了元素对象，你可以通过使用它的getContext() 方法来访问绘画上下文,getContext()方法封装了多个绘图功能。
绘制图像
canvas绘制图像的方法有两种：
context.stroke()
stroke()方法可以绘制图形的边框，默认黑色
context.strokeStyle
设置边框的颜色
context.fill()
fill()方法可以绘制填充的图形，默认黑色
context.fillStyle
设置填充的颜色
绘制矩形
context.fillStyle = 'white' //设置填充图形的颜色
context.strokeStyle = 'red'; //设置图形边框的颜色
context.fillRect(10, 10, 100, 100); //绘制填充图形
context.strokeRect(10, 10, 100, 100); //绘制图形的边框
绘制实心圆
arc(x, y, radius, startAngle, endAngle, anticlockwise)
x：圆心的x坐标
y：圆心的y坐标
radius：半径
startAngle：开始角度
endAngel：结束角度
anticlockwise：绘制的方向
context.beginPath(); //路径开始
context.arc(150, 150, 30, 0, Math.PI*2)
context.closePath(); //路径结束
context.fillStyle = 'red';
context.fill();
绘制线段
moveTo(x, y)：起点x，y坐标。
lineTo(x,y)：终点x，y坐标。
context.strokeStyle = 'red';
context.moveTo(0,0);
context.lineTo(100,100);
context.stroke();
ok,现在了解了canvas已经如何在画布上绘图之后，我们开始自由绘图。
鼠标的按下、移动、松开事件
大家应该都使用过电脑上的图画功能，按下左键，移动鼠标，松开左键，这一整个过程就可以绘制出一条线或者一个图形。
document.onmousedown：获取鼠标按下事件
document.onmousemove：获取鼠标移动事件
document.onmouseup：获取松开鼠标事件
我们只需要在这三个对应的事件中加入相应的绘图动作，就可以自由绘图了
1.设置一个标记，代表是否开启绘画状态。
var painting = false;
2.鼠标按下时，开启绘画状态，获得当前x，y坐标，在此坐标绘制一个点。
canvas.onmousedown = function(down){
painting = ture;
var lastPoint={x:undefined, y:undefined};
canvas.onmousedown = function(aaa){
var x = down.clientX;
var y = down.clientY;
lastPoint = {x: x, y: y};
console.log(lastPoint);
drawCircle(x,y,3);
}
}
3.鼠标移动时，不断获得新的坐标，连线两个坐标，并不断刷新旧的坐标。
canvas.onmousemove = function(move){
var x = move.clientX;
var y = move.clientY;
if(painting){ //如果不判断绘画状态，那么不管鼠标是出于按下或者松开状态，都会持续绘图
var newPoint = {x:x, y:y};
drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y);
lastPoint = newPoint;
console.log(lastPoint);
}
}
4.松开鼠标时，关闭绘画状态。
canvas.onmouseup = function(up){
painting = false;
}
封装的绘图方法：
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.lineTo(x2,y2);//终点
context.lineWidth = 5;
context.stroke();
context.closePath();
}
体验画板
完整代码请查看我的Github
emmmm目前功能还不完善，比如无法更换画笔颜色、样式太丑·····以后慢慢完善。
