html5 Canvas製作的網頁顏色拾取器

2021-09-01 14:35:12 字數 727 閱讀 6429

學習html5有一段時間了,本人也非常期待html5給我們帶來的方便。

這裡寫乙個小小的應用,應用html5 canvas製作乙個拾取頁面顏色的網頁。

首先說明這個原理(當然要達到這個目的有很多手段,這邊介紹本人的):

通過getimagedata()方法獲取畫布中的畫素。

getimagedata()支援四個引數

context.getimagedata(x,y,width,height)

(x,y)表示訪問的畫素區域的原點座標,(width,height)表示畫素區域的寬度和高度。

getimagedata本身不會出現任何可視的效果,但是它返回乙個2d渲染上下文imagedata物件。imagedata物件包含3個屬性:width,height,data.

這裡width,height指畫素區域的寬和高,重點是data屬性。data屬性儲存的是乙個一維陣列canvaspixelarray。並且每乙個畫素用4個整數值表示,範圍是0~255,

分別表示紅(r),綠(g),藍(b)和阿爾法值(a)。因此0~3表示第乙個畫素顏色值,4~7表示第二個顏色值,以此類推。

如果你看完了以上基礎那麼你就可以獲取到頁面的每乙個畫素顏色了,接下來就是具體應用了,把那些你獲取到的畫素顏色值都取出來,ok不廢話上**:

如果你對上面的**不熟但又很感興趣的話,建議去看html5 canvas裡面有很多讓你吃驚和感興趣的東西,如過感興趣還可以關注本人部落格,之後還會寫一些html5之類的。

html5 canvas製作刮刮卡

下班後,閒著無事,剛好近期在學習畫布相關知識,就寫了個刮刮卡的demo練一下手,相容安卓 ios哦。高手路過,多多指點!刮刮卡實現原理 通過canvas繪製乙個,使用者手指觸發螢幕時,刮開當前一部分封面圖,從而顯示正文中的內容。整體運用canvas的globalcompositeoperation屬...

HTML5 canvas製作遊戲接住小球

遊戲的整體邏輯是隨機在上面生成障礙物,當小球碰到障礙物時障礙物消失,當全部障礙物被消滅時贏得遊戲,而當小球掉到木板以下則輸掉遊戲。先從頁面說起,比較簡單的 只有乙個div乙個canvas,就不多做解釋了。然後是遊戲介面,小球和木板部分我定義了全域性變數來儲存他們的左上角座標,因為這個座標是不斷變化的...

用HTML5 canvas製作簡單遊戲

裡面是通過js動態建立的畫布,大家也可以直接在html頁面上先建立畫布,然後再通過document.getelementbyid 來獲取,這兩種方法沒有什麼區別,只是看你更習慣哪一種。var canvas document.createelement canvas var ctx canvas.ge...