html5中canvas的使用擷取滑鼠點選頁面上某點的RGB

2021-11-07 05:43:51

1.html5中的canvas在ie9中可以跑起來。在ie8則跑不起來，這時候就需要一些東西了。

我推薦這種方法，這樣顯得代碼不亂。

需要谷歌的一個html5.js的檔案即可。

注意：必須插入在<head></head>之間才會有效。由于html5在預設情況下表現為内聯元素，對這些元素進行布局我們需要利用css手工把它們轉為塊狀元素友善布局

這時候頁面支援canvas畫布，第一步已經完成了！

2.然後我們需要在畫布上畫出一塊區域，用來放置我們的圖檔，以便我們去擷取圖檔上的rgb。

将圖檔放置到畫布上

3.我們需要利用canvas的一個方法了，getimagedata() 這個方法可以獲得到畫布上的rgb以及灰階。(指定矩形的像素資料)

4.擷取滑鼠點選所在點的坐标

每次點選将擷取的x,y作為參數傳遞到getimagedata(參數1,參數2,參數3,參數4)，參數1與參數2上即可。

至于具體的getimagedata()用法以及參數含義我就不在這唠叨了，幫助文檔都有。

這是一個手寫的小取色功能，挺好玩。

//項目裡面還需要對圖檔進行同步放縮以及同步移動類似一個軟體做的有點複雜

轉載：http://www.cnblogs.com/zqzjs/p/4423246.html

繼續閱讀