###在canvas中的畫素操作
到目前為止，我們尚未深入了解canvas畫布真實畫素的原理，事實上，
你可以直接通過imagedata物件操縱畫素資料，直接讀取或將資料陣列寫入該物件中
###得到場景畫素資料
getimagedata():獲得乙個包含畫布場景畫素資料的imagedata對像,它代表了畫布區域的物件資料
ctx.getimagedata(sx, sy, sw, sh)
sx:將要被提取的影象資料矩形區域的左上角 x 座標。
sy:將要被提取的影象資料矩形區域的左上角 y 座標。
sw:將要被提取的影象資料矩形區域的寬度。
sh:將要被提取的影象資料矩形區域的高度。
var imagedata=ctx.getimagedata(0,0,100,100);
您的瀏覽器不支援畫布元素 請您換成萌萌的谷歌
view code
###imagedata物件
imagedata物件中儲存著canvas物件真實的畫素資料，它包含以下幾個唯讀屬性：
width:寬度，單位是畫素
height:高度，單位是畫素
data:uint8clampedarray型別的一維陣列，
包含著rgba格式的整型資料，範圍在0至255之間(包括255)
r:0 --> 255(黑色到白色)
g:0 --> 255(黑色到白色)
b:0 --> 255(黑色到白色)
a:0 --> 255(透明到不透明)
###在場景中寫入畫素資料
putimagedata()方法去對場景進行畫素資料的寫入。
putimagedata(myimagedata, dx, dy)
dx和dy引數表示你希望在場景內左上角繪製的畫素資料所得到的裝置座標
ctx.putimagedata(imagedata,0,0)###建立乙個imagedata物件
ctx.createimagedata(width, height);
width : imagedata 新物件的寬度。
height: imagedata 新物件的高度。
var imagedata=ctx.createimagedata(100,100);預設建立出來的是透明的
###操作單個畫素(行與列)
###馬賽克
您的瀏覽器不支援畫布元素 請您換成萌萌的谷歌
view code
canvas畫素操作
獲得乙個包含畫布場景畫素資料的imagedata對像,它代表了畫布區域的物件資料 ctx.getimagedata sx,sy,sw,sh sx 將要被提取的影象資料矩形區域的左上角 x 座標。sy 將要被提取的影象資料矩形區域的左上角 y 座標。sw 將要被提取的影象資料矩形區域的寬度。sh 將要...
canvas畫素操作函式封裝
傳入乙個imagedata物件，x軸的座標，y軸的座標 function getpxinfo imgdata,x,y 獲取某個畫素呼叫函式 示例 var imgdata ctx.getimagedata 0,0,canvas.width,canvas.height 獲取 49,49 的畫素的rgba...
canvas學習筆記八 畫素操作
imagedata物件包含了乙個區域內的canvas的畫素資訊。它包含以下可讀屬性 width canvas的寬度，單位是畫素。height canvas的高度，單位是畫素。data 乙個uint8clampedarray的一維陣列，包含了每個畫素的rgba值。什麼是uint8clampedarra...