canvas简易画板

575 0 0

作者:暮雪&&如霜

代码展示：

<!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/

内容来源于网络如有侵权请私信删除

标签： HTML HTML5

你还没有登录，请先登录或注册！

还没有人评论，欢迎说说您的想法！

canvas简易画板