通过HTML5 Canvas实现Writing/Paiting的功能，可选择笔触颜色、大小，目前只能在PC端运作，TOUCH功能后续增进；整体比较简单，不过还是学到不少东西。

演示地址：

如果大伙有其他的相关建议也可以提出哈，多谢！

var canvas;var context;var paint;var canvasWidth = 800;var canvasHeight = 420;var lineWidth = 8;var colorRed = "#d20000";var colorGreen = "#1c8c1c";var colorYellow = "#ffd200";var colorBlue = "#1496ff";var colorPink = "ff00b0";var colorOrange = "ff6600";function execute() {	prepareCanvas();}var clickX = new Array();var clickY = new Array();var clickDrag = new Array();var clickColor = new Array();var clickSize = new Array();var curColor = colorRed;var curSize = "normal";function prepareCanvas(){		var canvasDiv = document.getElementById('canvasWriting');	canvas = document.createElement('canvas');	canvas.setAttribute('width', canvasWidth);	canvas.setAttribute('height', canvasHeight);	canvas.setAttribute('id', 'canvas');	canvasDiv.appendChild(canvas);	if(typeof G_vmlCanvasManager != 'undefined') {		canvas = G_vmlCanvasManager.initElement(canvas);	}	context = canvas.getContext("2d");	$('#canvas').mousedown(function(e)	{		// Mouse down location		var mouseX = e.pageX - this.offsetLeft;		var mouseY = e.pageY - this.offsetTop;				paint = true;		addClick(mouseX, mouseY, false);		redraw();	});		$('#canvas').mousemove(function(e){		if(paint){			addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);			redraw();		}	});		$('#canvas').mouseup(function(e){		paint = false;	  	redraw();	});		$('#canvas').mouseleave(function(e){		paint = false;	});		$('#Red').mousedown(function(e){		curColor = colorRed;	});	$('#Green').mousedown(function(e){		curColor = colorGreen;	});	$('#Yellow').mousedown(function(e){		curColor = colorYellow;	});	$('#Blue').mousedown(function(e){		curColor = colorBlue;	});		$('#Pink').mousedown(function(e) {		curColor = colorPink;	});	$('#Orange').mousedown(function(e) {		curColor = colorOrange;	});	$('#Small').mousedown(function(e){		curSize = "small";	});	$('#Normal').mousedown(function(e){		curSize = "normal";	});	$('#Large').mousedown(function(e){		curSize = "large";	});		$('#clearCanvas').mousedown(function(e)	{		clickX = new Array();		clickY = new Array();		clickDrag = new Array();		clickColor = new Array();		clickSize = new Array();		clearCanvas();	});}function addClick(x, y, dragging){	clickX.push(x);	clickY.push(y);	clickDrag.push(dragging);	clickColor.push(curColor);	clickSize.push(curSize);}function clearCanvas(){	context.fillStyle = '#fff'; // Work around for Chrome	context.fillRect(0, 0, canvasWidth, canvasHeight); // Fill in the canvas with white	canvas.width = canvas.width; // clears the canvas }function redraw(){	clearCanvas();		var radius;	context.lineJoin = "round";					for(var i=0; i < clickX.length; i++)	{		if(clickSize[i] == "small"){			radius = 2;		}else if(clickSize[i] == "normal"){			radius = 5;		}else if(clickSize[i] == "large"){			radius = 10;		}			context.beginPath();		if(clickDrag[i] && i){			context.moveTo(clickX[i-1], clickY[i-1]);		}else{			context.moveTo(clickX[i]-1, clickY[i]);		}		context.lineTo(clickX[i], clickY[i]);		context.closePath();		context.strokeStyle = clickColor[i];		context.lineWidth = radius;		context.stroke();	}}execute();