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

成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)由有經(jīng)驗(yàn)的網(wǎng)站設(shè)計(jì)師、開(kāi)發(fā)人員和項(xiàng)目經(jīng)理組成的專業(yè)建站團(tuán)隊(duì)，負(fù)責(zé)網(wǎng)站視覺(jué)設(shè)計(jì)、用戶體驗(yàn)優(yōu)化、交互設(shè)計(jì)和前端開(kāi)發(fā)等方面的工作，以確保網(wǎng)站外觀精美、成都做網(wǎng)站、網(wǎng)站制作易于使用并且具有良好的響應(yīng)性。

先看看效果吧

效果先描述一下哈：這里有一個(gè)canvas畫(huà)布和幾個(gè)按鈕，canvas畫(huà)布是一個(gè)畫(huà)板，可以畫(huà)任何的圖形，按鈕可以設(shè)置畫(huà)板的畫(huà)筆顏色，也可以清除畫(huà)板，當(dāng)然，你要是畫(huà)出一副曠世奇畫(huà)，請(qǐng)點(diǎn)擊右鍵將圖片另存為，你懂的！

那這個(gè)是怎么做的呢？

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

原理其實(shí)很簡(jiǎn)單，這里用到的核心的方法是lineTo()和stroke()，看過(guò)前面的API文章的同學(xué)應(yīng)該明白是什么意思，就是劃線嘛

當(dāng)在畫(huà)布中，如果按下鼠標(biāo)，我們將畫(huà)布的起始點(diǎn)放在此時(shí)鼠標(biāo)的位置，用到的是moveTo()，然后鼠標(biāo)移動(dòng)的時(shí)候，用lineTo()畫(huà)路徑，用stroke()來(lái)填充路徑，移一下畫(huà)一下，這樣就能畫(huà)出曲線來(lái)，當(dāng)鼠標(biāo)抬起的時(shí)候，我們只需要取消鼠標(biāo)的動(dòng)作即可，如果你看過(guò)我寫(xiě)的鼠標(biāo)拖拽效果，是不是感覺(jué)很像啊，對(duì)的，思路跟拖拽是差不多的，只是具體的內(nèi)容不一樣而已，如果你沒(méi)看過(guò)鼠標(biāo)的拖拽效果，可以看這里 鼠標(biāo)拖拽

下面的按鈕因?yàn)楦髯钥刂频臇|西不一樣，我用了一個(gè)switch方法來(lái)給各自添加效果，設(shè)置顏色用到的canvas屬性是strokeStyle，清除畫(huà)布的方法在API里面沒(méi)有講到，可能是講漏了，這里說(shuō)一下吧，這里是用的clearRect()方法，還是說(shuō)一下吧：

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

參數(shù)：x,y 表示要清除的矩形的左上角的坐標(biāo)， w,h 表示要清除的矩形的寬高

看到這參數(shù)，我們可以了解到，它可以清除局部的畫(huà)布的內(nèi)容，也可以清除整個(gè)畫(huà)布的內(nèi)容，看你給多大的區(qū)域了，本實(shí)例是清除的整個(gè)畫(huà)布，因?yàn)槲覀冃枰麄€(gè)畫(huà)布都清除掉，如果你只想清除你不想要的那塊，可以設(shè)置一個(gè)精確的區(qū)域，我就不在這里啰嗦了！

大致的原理就這么簡(jiǎn)單，我把代碼貼出來(lái)供大家參考理解，順便把效果地址貼出來(lái)體驗(yàn)一下，廢話不多說(shuō)了，看代碼：

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，換個(gè)瀏覽器試試吧！
    
    

        
        
        
        
        
    

js:

window.onload = function(){        var canvas = document.getElementById("canvas");        var ctx = canvas.getContext("2d");        var oInput = document.getElementsByTagName("input");        for(var i=0;i
哦，這里的一個(gè)細(xì)節(jié)忘記交代了，就是必須在繪圖部分加上路徑閉合，即beginPath()和closePath()，為什么？因?yàn)樵诿看问髽?biāo)抬起之后，切換下面的樣式或者清除畫(huà)布的時(shí)候，如果路徑不閉合的話，那么后面的操作會(huì)污染前面所畫(huà)的東西，比如前面用紅畫(huà)的，現(xiàn)在我切換到綠色，現(xiàn)在畫(huà)的和原來(lái)畫(huà)的都變成綠了，比如清除畫(huà)布，畫(huà)過(guò)一次之后清除，然后再畫(huà)的時(shí)候第一次畫(huà)的東西又出來(lái)了，這都不是我們想要的，所以此點(diǎn)需謹(jǐn)記！
看完了這篇文章，相信你對(duì)“如何使用canvas設(shè)計(jì)出一個(gè)簡(jiǎn)易的畫(huà)板”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
            
            
                        

            名稱欄目：如何使用canvas設(shè)計(jì)出一個(gè)簡(jiǎn)易的畫(huà)板            

            分享網(wǎng)址：http://weahome.cn/article/gpseeo.html