By

文章目錄

canvas系列…. = . .= 我停頓好久了耶~(心虛) 我還去回顧了一下，接下來，唔…盡量好了~ XDDD
精神實驗室咩~ 就…大家發揮想像力好了~(汗||)

前情提要：

前回、提到了幾種簡便的、可以說完全不是透過canvas來做事件監聽的方式，這一回終於要進入正題了，
先來講如何直接透過canvas製作的前提，然後接下來2回再來講大概的實做方法(←我真的太富奸了~ XDDD) 然後、應該就可以
結束這個系列了…(終於)。

在介紹接下來的2次方法、首先…我要講的是，實做它們的精髓及概念：

canvas有2個隱藏性邪惡的方法，被視為很強大卻不是那摸好用的方法：getImageData和putImageData，理由如下：

  • 這2個方法是pixel級的方法，可精確到pixel。也就是說，我們可以操作圖形，像……影像處理那樣，而非像svg的那種
    物件的感覺。所以、被視為非常強大…。網路上有不少pixel相關的demo啦~ @ 0@ 有興趣可以找找…。

  • 那…為什摸有不少人會覺得不好用咧~ = “””= 原因很簡單~ 它的data，是按照…. rgba的陣列下去排列，也就是說…
    在這邊的處理，多數是需要經過有規律的數學算式…根據我所認識的人類裡面，大多數的人聽到數學都避如蛇蠍。
    原本canvas的操作就是比較底層而且有些抽象的了，在牽扯到pixel運算…只好~ 掰~！！

基於以上的理由，我想… 這個邪惡的方法，就…鮮少人知道了~ 科科科科 接下來，就讓我們進入正題吧~ 該怎摸運用
這2個方法來製作。

我想、一定有很多人對於getImageData和putImageData懵懵懂懂、所以…我們來看一下，它們到底在幹麻，
參考link

從method的名稱來看，很明顯… getImageData就是，取得canvas上面的pixel data，putImageData就是把data塞到
canvas上去。

所以，偵測事件時，利用上述的特性，我們可以….

  • 在mouse click(←可代入其他事件)，取得當時的座標。

  • 取得座標後，對應到canvas上，利用getImageData得到，對應位置的pixel值。

  • 取得pixel值(=[r, g, b, a])後，進入判斷如下：
    $$
    trigger = \cases {

    a = 0, & false \cr
a \neq 0, & true

    }
    $$

以上，監測canvas的基本功結束，這種作法有多好，讓我們來看看：

  • 可以少一層dom，來處理事件監測$\Longrightarrow$意味著，html的部份會看起來比較清爽。也可避免在某些操作的時候
    ，還必須擔心這一層的css。

  • 不利用其他層做監聽$\Longrightarrow$意味著，我不需要讓canvas與其他層做某方面的同步處理及轉換。

  • 單利用canvas$\Longrightarrow$意味著，在監聽上，可以減少轉換的時間與誤差。

  • 單利用canvas$\Longrightarrow$意味著，甚至可以精確到1 pixel (←雖然、我認為在某些情況，精確到1 pixel是不必要
    的)。

好認真的連續2篇文章耶~ 不行了… 我要休息一下~ = . .= 拖稿繼續…w

To Be Continued……

文章目錄