如何使用canvas設計出一個簡易的畫板

小編給大家分享一下如何使用canvas設計出一個簡易的畫板，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

先看看效果吧

效果先描述一下哈：這里有一個canvas畫布和幾個按鈕，canvas畫布是一個畫板，可以畫任何的圖形，按鈕可以設置畫板的畫筆顏色，也可以清除畫板，當然，你要是畫出一副曠世奇畫，請點擊右鍵將圖片另存為，你懂的！

那這個是怎么做的呢？

我先說原理在貼代碼，方便大家理解，我都這樣了，就不要直接拿來主義了哈！

原理其實很簡單，這里用到的核心的方法是lineTo()和stroke()，看過前面的API文章的同學應該明白是什么意思，就是劃線嘛

當在畫布中，如果按下鼠標，我們將畫布的起始點放在此時鼠標的位置，用到的是moveTo()，然后鼠標移動的時候，用lineTo()畫路徑，用stroke()來填充路徑，移一下畫一下，這樣就能畫出曲線來，當鼠標抬起的時候，我們只需要取消鼠標的動作即可，如果你看過我寫的鼠標拖拽效果，是不是感覺很像啊，對的，思路跟拖拽是差不多的，只是具體的內容不一樣而已，如果你沒看過鼠標的拖拽效果，可以看這里 鼠標拖拽

下面的按鈕因為各自控制的東西不一樣，我用了一個switch方法來給各自添加效果，設置顏色用到的canvas屬性是strokeStyle，清除畫布的方法在API里面沒有講到，可能是講漏了，這里說一下吧，這里是用的clearRect()方法，還是說一下吧：

clearRect(x,y,w,h)  在給定的矩形內清除指定的像素

參數：x,y 表示要清除的矩形的左上角的坐標， w,h 表示要清除的矩形的寬高

看到這參數，我們可以了解到，它可以清除局部的畫布的內容，也可以清除整個畫布的內容，看你給多大的區域了，本實例是清除的整個畫布，因為我們需要整個畫布都清除掉，如果你只想清除你不想要的那塊，可以設置一個精確的區域，我就不在這里啰嗦了！

大致的原理就這么簡單，我把代碼貼出來供大家參考理解，順便把效果地址貼出來體驗一下，廢話不多說了，看代碼：

css:

*{ padding:0; margin:0;}body{ background:#ccc;}canvas{ background:#fff; margin:50px 10px; }input{ display:inline-block; width:80px; height:30px; cursor:pointer; margin-left:10px;}

html:

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

js:

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設計出一個簡易的畫板”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！