canvas简易画板 - 暮雪如霜_H5之家 - 中国HTML5教程资源分享第一站

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></div> <canvas></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

posted @