畫出你的風(fēng)格：HTML5創(chuàng)意畫板的設(shè)計(jì)教程

在HTML5備受期待和矚目的今天，越來(lái)越多的人已經(jīng)感受到它帶來(lái)的無(wú)限魅力與震撼力，許多的技術(shù)人員、設(shè)計(jì)者、互聯(lián)網(wǎng)愛(ài)好者們紛紛加入了HTML5的研究與設(shè)計(jì)中。

首先我先為大家介紹一下一個(gè)功能很強(qiáng)大的HTML5在線繪畫應(yīng)用，它還擁有多種筆刷和濾鏡，具有類似于photoshop的圖層功能，可調(diào)節(jié)透明度隱藏等，還有漸變、油漆桶、拾色器、選擇工具，大家一定會(huì)為此感到驚訝吧。

但這樣復(fù)雜的應(yīng)用并沒(méi)有使用flash實(shí)現(xiàn)，在canvas標(biāo)記還沒(méi)有出現(xiàn)之前，要想實(shí)現(xiàn)復(fù)雜的網(wǎng)頁(yè)應(yīng)用，或者直接在網(wǎng)頁(yè)上進(jìn)行繪圖，只能借助于第三方的插件，比如Flash或Java，而現(xiàn)在，借助于canvas標(biāo)記，我們可以實(shí)現(xiàn)圖像顯示和處理了，那么現(xiàn)在就讓我拋磚引玉，講解一下我的一些開(kāi)發(fā)思路吧。

想要制作一個(gè)簡(jiǎn)單的畫板并不是太難，但我建議您掌握一定的canvas基礎(chǔ)和javascript基礎(chǔ)，這樣更便于理解和學(xué)習(xí)本教程。而如果你canvas技術(shù)比較好的話，你一定會(huì)覺(jué)得本教程又長(zhǎng)又啰嗦，但是教程不可能顧及到所有的閱讀者，所以麻煩你跳過(guò)你了解的部分，只關(guān)注重要的部分就好了。

首先，我講解一下我的開(kāi)發(fā)思路。我們需要在頁(yè)面中添加一個(gè)canvas標(biāo)記作為我們的畫布，也就是我們將來(lái)要繪畫的畫板。由于需要用戶使用鼠標(biāo)點(diǎn)擊、滑動(dòng)、釋放鼠標(biāo)等操作來(lái)實(shí)現(xiàn)繪畫，所以我們也必須要使用鼠標(biāo)的幾個(gè)基本的監(jiān)聽(tīng)事件mousemove、mouseup、mousedown。

　　document.addEventListener('mousemove', mouseMove, false);
        document.addEventListener('mousedown', mouseDown, false);
        document.addEventListener('mouseup', mouseUp, false);

為了使繪畫出來(lái)的線條更流暢，兼顧性能問(wèn)題，我們可以采用setInterval來(lái)設(shè)置監(jiān)聽(tīng)事件的時(shí)間間隔。 setInterval(函數(shù)名,1000/60); 其中1000/60為時(shí)間間隔。

　　setInterval(loop, 1000 / 60);

function loop() {
    $pos_display.innerHTML=