前面講了一部分的canvasAPI的基礎知識，光看API的介紹確實是很無趣乏味，需要一點可以激發內心的激情的東西來激勵自己來學習，於是就了伴隨canvasAPI學習的小實例，這樣透過API的知識，結合小實例的應用，就可以更好的去理解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畫板小實例
以後慢慢會帶來更多的小實例供大家參考，寫的不是很好，萬望不要嫌棄，也希望大家多多的關注我，這才是我最大的動力了，哈哈！
大致就是這樣，謝謝大家！
以上是使用canvas設計出一個簡易的畫板的詳細內容。更多資訊請關注PHP中文網其他相關文章！
