canvas简易画板

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas实现简易画板</title>
	<style>
		body, div {
			margin: 0;
			padding: 0;
			text-align: center;
		}
		#bk {
			margin: 10px auto;
			width: 400px;
			height: 36px;
		}
		.bk {
			width: 20px;
			height: 20px;
			display: inline-block;
			margin: 12px;
			border: 1px dotted gray;
		}
		#cav {
			border: 1px solid #ddd;
		}
	</style>
</head>
<body>
	<div id="bk"></div>
	<canvas id="cav" width="600" height="400"></canvas>
	<script>
		var canvas = document.getElementById('cav');
		var ctx = canvas.getContext('2d');
		var $bk = document.getElementById('bk');
		var bColor = ['#000000', '#999999', '#CC66FF', '#FF0000', '#FF9900', '#FFFF00', '#008000', '#00CCFF'];
		var col = "#FF0000";
		var fragment = document.createDocumentFragment();
		var $span = null;
		function initBrush() {
			for(var i=0; i<bColor.length; i++) {
				$span = document.createElement('span');
				$span.className = 'bk';
				$span.style.backgroundColor = bColor[i];
				$span.onclick = function() {
					col = window.getComputedStyle(this, null).getPropertyValue('background-color');
				}
				fragment.appendChild($span);
			}
			$bk.appendChild(fragment);
		}
		function initPainter() {
			canvas.onmousedown = function(e) {
				ctx.lineWidth = 2;
				ctx.strokeStyle = col;
				var x = e.offsetX;
				var y = e.offsetY;
				ctx.beginPath();
				ctx.moveTo(x, y);
				canvas.onmousemove = function(e) {
					var nx = e.offsetX;
					var ny = e.offsetY;
					ctx.lineTo(x, y);
					ctx.stroke();
					x = nx;
					y = ny;
				}
				document.onmouseup = function() {
					canvas.onmousemove = null;
				}
			}
		}
		window.onload = function() {
			initBrush();
			initPainter();
		}
	</script>
</body>
</html>

效果展示：

知识点

Window.getComputedStyle():是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读，而element.style能读能写。

语法如下：

var style = window.getComputedStyle("元素", "伪类");

举例如下：

var elem1 = document.getElementById("elemId");
var style = window.getComputedStyle(elem1, null);
// this is equivalent:
// var style = document.defaultView.getComputedStyle(elem1, null);

额外提示下：Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前，第二个参数“伪类”是必需的（如果不是伪类，设置为null），不过现在嘛，不是必需参数了。其中defaultView一般情况下是不需要写的，只有在FireFox3.6中才会使用。

如果我们想要获得某个具体的属性值，我们需要用到getPropertyValue方法，实例如下：

window.getComputedStyle(document.querySelector("#testEL"),null).getPropertyValue("background-color");
//或者是用另外一种方法
window.getComputedStyle(element, null).getPropertyValue("float");

值得注意的是：使用getPropertyValue方法不支持驼峰写法，使用-来分割，例如：style.getPropertyValue("border-top-left-radius");如果我们不使用getPropertyValue方法，直接使用键值访问，其实也是可以的。但是，比如这里的的float，如果使用键值访问，则不能直接使用getComputedStyle(element, null).float，而应该是cssFloat与styleFloat，自然需要浏览器判断了，比较折腾！

另外还需注意的是在IE中的解决方法

在IE8及以下是不支持这个属性的，它自己使用currentStyle来获取css值，不过，currentStyle属性貌似不支持伪类样式获取，这是与getComputedStyle方法的差异。根据上面知识我们可以写一个封装好的获取样式函数：

function getStyle(obj,attr){
    if(obj.currentStyle){ //IE
        return obj.currentStyle[attr];
    }else{
        return window.getComputedStyle(obj,"伪类")[attr];//Firefox
    }
}

补充知识点

JS修改css样式的四种方法：

直接设置style的属性：element.style.backgroundColor = 'red'
直接设置属性：element.setAttribute('height', 100) //element.setAttribute('height', '100px')
设置cssText：element.style.cssText = 'background-color: blue;color: red;'
改变class：element.className = 'blue';element.classList.add('blue')

参考链接：

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/