HTML canvas createImageData()用法及代碼示例

createImageData()方法用於創建新的空白ImageData對象。默認情況下，新對象的像素為透明黑色。

createImageData()方法有兩種語法：

它用於創建具有指定尺寸(以像素為單位)的新ImageData對象：
用法:
```
var imgData = context.createImageData(width, height);
```
它用於創建一個新的ImageData對象，該對象的尺寸與anotherImageData指定的對象相同。它不會複製圖像數據。
用法:
```
var imgData=context.createImageData(imageData);
```

參數值：

width:它表示新ImageData對象的寬度(以像素為單位)。
height:它表示新ImageData對象的高度(以像素為單位)。
imageData:這是另一個ImageData對象

例：

<!DOCTYPE html> 
<html> 
  
<body> 
    <h3 style="color:green">GeeksforGeeks</h3> 
    <h3>HTML canvas createImageData() Method</h3> 
    <canvas id="myCanvas"
            width="200"
            height="200"
            style="border:2px solid ;"> 
  </canvas> 
    <p id=g eeks></p> 
    <script> 
        var can = document.getElementById("myCanvas"); 
        var gfg = can.getContext("2d"); 
        var imgData = gfg.createImageData(150, 100); 
  
        var i; 
        for (i = 0; i < imgData.data.length; i += 3) { 
            imgData.data[i + 0] = 100; 
            imgData.data[i + 1] = 0; 
            imgData.data[i + 2] = 0; 
        } 
  
        gfg.putImageData(imgData, 10, 10); 
    </script> 
  
</body> 
  
</html>

輸出：

支持的瀏覽器：

chrome
火狐瀏覽器
Internet Explorer 9.0
Opera
蘋果瀏覽器

相關用法

注：本文由純淨天空篩選整理自shubham_singh大神的英文原創作品 HTML | canvas createImageData() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。