內容概要：本文通過簡單的**例項，以及略猥瑣的demo，展示了canvas在影象畫素資料操作方面的常用介面。至於如何利用這幾個介面實現更複雜的效果，則會在後續章節裡繼續講述。
一、canvas填充； 2、設定/獲取canvas資料； 3、建立canvas資料；4、關於imagedata.data的一點補充； 5、寫在後面
一、canvas填充
複製**
**如下:
/**
* @description
* @param x 影象起始繪製點距離canvas最左側的距離
* @param y 影象起始繪製點距離canvas最頂部的距離
* @param width 最終影象在canvas上繪製出來的寬度
* @param height 最終影象在canvas上繪製出來的高度
*/ context.drawimage(image, x, y, width, height)
demo_01如下：
複製**
**如下:
function $(id)
function getimage(url, callback);
img.src = url;
document.body.appendchild(img);
} function drawimage());
} drawimage();
demo說明：載入xiangjishi.png，載入完成後，從相對於畫布左上角座標(0, 0)處開始，將xiangjishi.png繪製在畫布上，效果如下：
看到這裡，可能對於 context.drawimage(image, x, y, width, height) 裡四個引數的含義理解還不是特別清楚，可以簡單把幾個引數修改下看看效果：
複製**
**如下:
var offsetx = 20;
var offsety = 20;
var drawwidth = img.width/2;
var drawheight = img.height/2;
context.drawimage(img, offsetx, offsety, drawwidth, drawheight);
修改後的demo效果如下，結合上面api的說明，應該不難理解四個引數所代表的含義
複製**
**如下:
context.drawimage(image, x, y, width, height)
二、獲取/設定canvas資料
複製**
**如下:
/**
* @description 獲取canvas特定區域的畫素點資訊
* @param x 獲取資訊的起始點距離canvas最左側的距離
* @param y 獲取資訊的起始距離canvas最頂部的距離
* @param width 獲取的寬度
* @param height 最終的高度
*/ context.getimagedata(x, y, width, height)
該方法返回乙個imagedata物件，該物件主要有三個屬性：
imagedata.width：每行有多少個元素
imagedata.height：每列有多少個元素
imagedata.data：一維陣列，儲存了從canvas中獲取的每個畫素的rgba值。該陣列為每個畫素點儲存了四個值——紅、綠、藍和alpha透明度。每個值都在0～255之間。因此，canvas上的每個畫素在這個陣列中就變成了四個整數值。陣列的填充順序從左到右，從上到下。
複製**
**如下:
/**
* @description 用特定的imagedata設定canvas特定區域的畫素資訊
* @param x 從canvas的x點處開始設定
* @param y 從canvas的y點處開始設定
* @param width 獲取的寬度
* @param height 最終的高度
*/ context.putimagedata(imagedata, x, y)
下面結合demo_2來說明getimagedata()的用法以及各自引數的對應的含義
demo_02 源**如下，在demo_01的基礎上稍事修改：
複製**
**如下:
複製**
**如下:
function getandsetimagedata());
} demo_2 展示效果如下：
到這裡，基本能夠清除getimagedata方法四個引數對應的含義。putimagedata引數的理解也不難，demo_2的**略加修改後看下效果就知道了
複製**
**如下:
function getandsetimagedata());
} demo_3展示效果如下，可是試著把幾個引數自己改一下試下，可能會有更好的理解：
三、建立canvas資料
複製**
**如下:
/**
* @description 預先建立一**像資料，並繫結在canvas物件上
* @param width 建立的寬度
* @param height 建立的高度
*/ context.createimage程式設計客棧data(width, height)
介面比較簡單，建立的資料可以像用getimagedata獲取到的資料那樣進行同樣的處理，這裡僅需要注意的是：這**像資料不一定會反映canvas的當前狀態。
四、關於imagedata的一點補充
再《html5高階程式設計》以及很多文章裡面，都把imagedata.data當作乙個陣列來講，但其實：
複製**
**如下:
imagedata.data返回的並不是真正的陣列，而是乙個類陣列的物件，可以將imagedata.data的型別列印出來
console.log(object.prototype.tostring.call(imgagedata.data)); //輸出：[object uint8clampedarray]
然後再將imagedata.data的具體內容列印出來，內容較長，僅擷取最前面以及最後面的一段，可以看出：
imagedata.data其實是乙個物件，其索引從0開始，一直到width*height*4-1。
為什麼不直接用陣列存放？因為陣列的長度有個上限，假設為limitlength，超過limitlength的元素，均以鍵值的方式儲存，如 data[limitlength + 100] 其實是 data['limitlength + 100 + 程式設計客棧'']（limitlength具體值記不得了，有興趣的童鞋可以查下）
至於最後面的bytelength、byteoffset、buffer屬性，未深究，此處不展開以防誤導讀者。
五、寫在後面
水平有限，如有疏誤，敬請指出
本文標題: html5 canvas畫素處理使用介面介紹
本文位址:
HTML5 canvas 繪製圓形
canvas繪製圓形的思路 1 建立路徑 beginpath 2 建立圓形的路徑 3 關閉路徑 closepath 路徑不關閉也能繪製出圖形 4 設定繪製樣式。建立圓形路徑時需要用到物件的arc方法，方法定義如 arc x,y,radius,startangle,endangle,countercl...
HTML5 canvas擦除無效
部分安卓手機上會出現canvas內圖表重疊，並且清除無效，屬於偶現缺陷，非常難以確定其產生原因，比如下圖這個樣子，第一次繪製的圖形沒有擦除，導致第二次繪製時出現重影 初步考慮為裝置自身問題，引起canvasapi的context.clearrect執行無效。在經過一些嘗試之後，發現在每次擦除 cle...
HTML5canvas時鐘例項
直接放 不太好，還是簡單說說運用到的canvas知識 1 canvas 元素用於在網頁上繪製圖形。id c width 1000 height 400 canvas 2 canvas2d環境下繪製 var ogc oc.getcontext 2d 3 我要開始繪製路徑啦 ogc.begin path...