制作一个画板

什么是<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目前功能还不完善，比如无法更换画笔颜色、样式太丑·····以后慢慢完善。