使用canvas设计出一个简易的画板

前面讲了一部分的canvasAPI的基础知识，光看API的介绍确实是很无趣乏味，需要一点可以激发内心的激情的东西来激励自己来学习，于是就了伴随canvasAPI学习的小实例，这样通过API的知识，结合小实例的应用，就可以更好的去理解canvas的这些属性和方法，也可以激发自己创造canvas特效的灵感和感觉，恩恩，请叫我雷锋，不谢！

 <canvas width="500" height="500" id="canvas">
        <span>亲，您的浏览器不支持canvas，换个浏览器试试吧！</span>
    </canvas>
    <p>
        <input type="button" value="红画笔" id="red">
        <input type="button" value="绿画笔" id="green">
        <input type="button" value="蓝画笔" id="blue">
        <input type="button" value="重置颜色" id="default">
        <input type="button" value="清除画布" id="clear">
    </p> 

window.onload = function(){        var canvas = document.getElementById("canvas");        var ctx = canvas.getContext("2d");        var oInput = document.getElementsByTagName("input");        for(var i=0;i<oInput.length;i++){
            oInput[i].onclick = function(){                var ID = this.getAttribute('id');                switch(ID){                    case 'red':
                        ctx.strokeStyle = 'red';                        break;                    case 'green':
                        ctx.strokeStyle = 'green';                        break;                    case 'blue':
                        ctx.strokeStyle = 'blue';                        break;                    case 'default':
                        ctx.strokeStyle = 'black';                        break;                    case 'clear':
                        ctx.clearRect(0,0,canvas.clientWidth,canvas.clientHeight);                        break;    
                }    
            }    
        }
        draw();        function draw(){
            canvas.onmousedown = function(ev){                var ev = ev || event;
                ctx.beginPath();
                ctx.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
                document.onmousemove = function(ev){                    var ev = ev || event;
                    ctx.lineTo(ev.clientX - canvas.offsetLeft,ev.clientY - canvas.offsetTop);
                    ctx.stroke();    
                }
                document.onmouseup = function(ev){
                    document.onmousemove = document.onmouseup = null;
                    ctx.closePath();
                }
                
            }
        }
        
        
        
    } 

哦，这里的一个细节忘记交代了，就是必须在绘图部分加上路径闭合，即beginPath()和closePath()，为什么？因为在每次鼠标抬起之后，切换下面的样式或者清除画布的时候，如果路径不闭合的话，那么后面的操作会污染前面所画的东西，比如前面用红画的，现在我切换到绿色，现在画的和原来画的都变成绿了，比如清除画布，画过一次之后清除，然后再画的时候第一次画的东西又出来了，这都不是我们想要的，所以此点需谨记！

效果演示请看这里：

canvas画板小实例

以后慢慢会带来更多的小实例供大家参考，写的不是很好，万望不要嫌弃，也希望大家多多的关注我，这才是我最大的动力了，哈哈！

大致就是这样，谢谢大家！

以上就是使用canvas设计出一个简易的画板的详细内容，更多请关注Gxl网其它相关文章！

查看更多关于使用canvas设计出一个简易的画板的详细内容...