canvas案例：画板

重点在于鼠标事件，计算鼠标的位置，mousedown的时候触发mousemove和mouseup事件，然后点击按钮切换样式

body {
	margin: 0;
}
.container {
	width: 1024px;
	height: 600px;
	margin: 50px auto 0;
	box-shadow:  0 0 10px #666;
	border-radius: 10px;
}
.tool-bar {
	width: 1024px;
	height: 80px;
	margin: 10px auto;
}
.tool-bar div {
	float: left;
	width: 80px;
	height: 80px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	cursor: pointer;
}
.tool-bar .color.black {
	background-color: black;
}
.tool-bar .color.red {
	background-color: red;
}
.tool-bar .color.green {
	background-color: green;
}
.tool-bar .color.blue {
	background-color: blue
}
.tool-bar .line span {
	display: block;
	margin: 0 auto;
	background-color: #000;
	border-radius: 50%;
}
.tool-bar .line.line-4 span {
	width: 4px;
	height: 4px;
	margin-top: 38px;
}
.tool-bar .line.line-8 span {
	width: 8px;
	height: 8px;
	margin-top: 37px;
}
.tool-bar .line.line-12 span {
	width: 12px;
	height: 12px;
	margin-top: 36px;
}
.tool-bar .remove {
	text-align: center;
	line-height: 70px;
	font-size: 40px;
}

<div class="container">
	<canvas id="myCanvas" width="1024" height="600"></canvas>
</div>
<div class="tool-bar J_toolsBar">
	<div class="color black" data-color="black"></div>
	<div class="color red" data-color="red"></div>
	<div class="color green" data-color="green"></div>
	<div class="color blue" data-color="blue"></div>
	<div class="line line-4" data-line="4"><span></span></div>
	<div class="line line-8" data-line="8"><span></span></div>
	<div class="line line-12" data-line="12"><span></span></div>
	<div class="remove">x</div>
</div>

;(function() {
	var can = document.getElementById('myCanvas'),
		tools = document.getElementsByClassName('tool-bar')[0],
		ctx = can.getContext('2d'),
		cWidth = ctx.canvas.width,
		cHeight = ctx.canvas.height,
		color = 'black',
		lineWidth = '4',
		x,
		y;

	var init = function() {
		bindEvent();
	}

	function bindEvent() {
		can.addEventListener('mousedown', function(e) {

			mouseDown(e);

			document.addEventListener('mousemove', mouseMove, false);
			document.addEventListener('mouseup', mouseUp, false);
		}, false);

		tools.addEventListener('click', btnClick, false);
	}

	function mouseDown(e) {
		_setXY(e);

		ctx.beginPath();
		ctx.strokeStyle = color;
		ctx.lineCap = 'round';
		ctx.lineJoin = 'round';
		ctx.lineWidth = lineWidth;
		ctx.moveTo(x, y);
	}

	function mouseMove(e) {
		_setXY(e);

		if (x <= 0) {
			x = 0;
		} else if (x > can.offsetWidth) {
			x = can.offsetWidth;
		}

		if (y <= 0) {
			y = 0;
		} else if (y > can.offsetHeight) {
			y = can.offsetHeight;
		}

		ctx.lineTo(x, y);
		ctx.stroke();
	}

	function mouseUp() {
		document.removeEventListener('mousemove', mouseMove, false);
		document.removeEventListener('mouseup', mouseUp, false);
	}

	function btnClick(e) {
		var e = e || window.evet,
			tar = e.target || e.srcElement,
			className = tar.className;

		if (className.indexOf('color') === 0) {
			color = tar.getAttribute('data-color');
		}
		if (className.indexOf('line') === 0) {
			lineWidth = tar.getAttribute('data-line');
		}
		if (className === 'remove') {
			ctx.clearRect(0, 0, cWidth, cHeight);
		}
	}

	function _setXY(e) {
		var e = e || window.evet;

		x = e.pageX - can.offsetLeft;
		y = e.pageY - can.offsetTop;
	}

	init();
})();