這篇文章給大家分享的是有關(guān)HTML5 Canvas像素操作的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、西豐網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5頁面制作、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為西豐等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

注意 由于人們可以直接操縱像素數(shù)據(jù)，因此出現(xiàn)了某些人利用從Canvas直接獲取并且修改數(shù)據(jù)的能力做出一些惡意和非法的行為。瀏覽器限制了人們用Canvas跨域獲取圖片數(shù)據(jù)的能力，非同域圖片禁止讀取和修改，

在像素操作的過程中，ImageData 對象保存了圖像像素值。每個對象有3個屬性，即width、height和data。data屬性類型為CanvasPixelArray，用于存儲width*height*4個像素值。每一個像素有RGB值和透明度Alpha值（其值為0至255）。像素的順序從左至右，從上到下，按行存儲。

既然討論像素操作，那么讀者最好能夠從頭到尾了解這一過程，包括讀取、控制和更新Canvas上的像素。這里，我們要介紹3個內(nèi)置方法，即getImageData()、putImageData()、create-ImageData()。

1. getImageData()

getImageData()方法用于從Canvas中復(fù)制某一矩形區(qū)域的像素數(shù)據(jù)。具體的調(diào)用代碼如下：

var canvasData = ctx.getImageData(0, 0, mycanvas.width, mycanvas.height);

要注意的是，像素級操作的運(yùn)算量非常巨大，以致查看canvasData.data的數(shù)據(jù)時會由于內(nèi)存的消耗過大而導(dǎo)致瀏覽器崩潰，

2. putImageData()

putImageData()方法用于修改或者更新某個圖形區(qū)域中的像素信息，此方法僅能在同域下使用。本地硬盤模式下也無法使用，必須架起Web服務(wù)器。

具體代碼如下：

var canvasData = ctx.putImageData(canvasData, 0, 0);

3. createImageData()

createImageData()方法根據(jù)指定的圖片數(shù)據(jù)（image data）具有的寬高，建立一個ImageData對象。此方法并不會從現(xiàn)有的Canvas中復(fù)制像素，它生成的是完全空白的像素矩陣，它的初始值是全透明的黑色，即 (255,255,255,0)，偽代碼如下：

var canvasData = ctx.createImageData(mycanvas.width,my canvas.height);

canvasData="某些像素數(shù)據(jù)"

ctx.putImageData (canvasData, 0, 0);

下面的代碼中，請務(wù)必在Web服務(wù)器環(huán)境下執(zhí)行，否則無法正確顯示。

感謝各位的閱讀！關(guān)于“HTML5 Canvas像素操作的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！