HTML5 canvas完成绘图程序（画板）

思路：

1. 定义画布
2. 设置画布样式
3. js准备绘图上下文环境
4. js绘图

HTML定义画布：

<canvas id="myCanvas" width="860" height="480"></canvas>

CSS设置画布样式：

    #myCanvas{
			border: 1px solid red;
		   }

JS准备绘图上下文环境并绘图：

    var canvas,pen;
	canvas=document.getElementById("myCanvas");
	pen=canvas.getContext("2d");
	
	pen.lineWidth=1;
	pen.strokeStyle="black";
	
	var mousePress = false;
	var last=null;
	
	function pos(event){
		var ex,ey;
		ex=event.clientX;
		ey=event.clientY;
		return{
			x:ex,
			y:ey
		}
	}
	function start(event){
		mousePress=true;
	}
	function draw(event){
		if(!mousePress) return;
		var xy = pos(event);
		if(last !=null){
			pen.beginPath();
			pen.moveTo(last.x,last.y);
			pen.lineTo(xy.x,xy.y);
			pen.stroke();
		}
		last=xy;
	}
	function finish(event){
		mousePress=false;
		last =null;
	}
	canvas.onmousedown = start;
	canvas.onmousemove=draw;
	canvas.onmouseup=finish;

画图小程序最终效果如下所示：