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

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

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

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

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

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

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

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

　　setInterval(loop, 1000 / 60);

function loop() {
    $pos_display.innerHTML=