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/