在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

CanvasRenderingContext2D.createImageData() method of the Canvas 2D API creates a new, blank ImageData object with the specified dimensions. All of the pixels in the new object are transparent black.

句法

ImageData ctx.createImageData(width, height);
ImageData ctx.createImageData(imagedata);
					

参数

width

The width to give the new ImageData object. A negative value flips the rectangle around the vertical axis.

height

The height to give the new ImageData object. A negative value flips the rectangle around the horizontal axis.

imagedata

An existing ImageData object from which to copy the width and height. The image itself is not copied.

返回值

新的 ImageData object with the specified width and height. The new object is filled with transparent black pixels.

Errors thrown

IndexSizeError

Thrown if either of the width or height arguments is zero.

范例

Creating a blank ImageData object

This snippet creates a blank ImageData 对象使用 createImageData() 方法。

HTML

<canvas id="canvas"></canvas>
					

JavaScript

The generated object is 100 pixels wide and 50 pixels tall, making 5,000 pixels in all. Each pixel within an ImageData object consists of four array values, so the object's data property has  a length of 4 × 5,000, or 20,000.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const imageData = ctx.createImageData(100, 50);
console.log(imageData);
// ImageData { width: 100, height: 50, data: Uint8ClampedArray[20000] }
					

Filling a blank ImageData object

This example creates and fills a new ImageData object with purple pixels.

HTML

<canvas id="canvas"></canvas>
					

JavaScript

Since each pixel consists of four values, the for loop iterates by multiples of four. The array values associated with each pixel are R (red), G (green), B (blue), and A (alpha), in that order.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const imageData = ctx.createImageData(100, 100);
// Iterate through every pixel
for (let i = 0; i < imageData.data.length; i += 4) {
  // Modify pixel data
  imageData.data[i + 0] = 190;  // R value
  imageData.data[i + 1] = 0;    // G value
  imageData.data[i + 2] = 210;  // B value
  imageData.data[i + 3] = 255;  // A value
}
// Draw image data to the canvas
ctx.putImageData(imageData, 20, 20);
					

结果

More examples

For more examples using createImageData() 和 ImageData object, see Pixel manipulation with canvas and ImageData.data .

规范

规范	状态	注释
HTML 实时标准 The definition of 'CanvasRenderingContext2D.createImageData' in that specification.	实时标准

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
createImageData	Chrome Yes	Edge 12	Firefox 2	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 4	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes

图例

完整支持

完整支持

Gecko-specific notes

• Starting with (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2):
  • createImageData() now correctly returns at least one pixel's worth of image data if a rectangle smaller than one pixel is specified.
  • Specifying non-finite values when calling createImageData() now properly throws a NOT_SUPPORTED_ERR 异常。
  • createImageData() now handles negative arguments in accordance with the specification, by flipping the rectangle around the appropriate axis.

另请参阅

• The interface defining this method: CanvasRenderingContext2D
• ImageData
• Pixel manipulation with canvas

元数据

• 最后修改： 2019 年 3 月 23 日

相关话题

1. CanvasRenderingContext2D
2. 特性

   1. canvas
   2. currentTransform
   3. direction
   4. fillStyle
   5. filter
   6. font
   7. globalAlpha
   8. globalCompositeOperation
   9. imageSmoothingEnabled
   10. imageSmoothingQuality
   11. lineCap
   12. lineDashOffset
   13. lineJoin
   14. lineWidth
   15. miterLimit
   16. shadowBlur
   17. shadowColor
   18. shadowOffsetX
   19. shadowOffsetY
   20. strokeStyle
   21. textAlign
   22. textBaseline
3. 方法

   1. addHitRegion()
   2. arc()
   3. arcTo()
   4. beginPath()
   5. bezierCurveTo()
   6. clearHitRegions()
   7. clearRect()
   8. clip()
   9. closePath()
   10. createImageData()
   11. createLinearGradient()
   12. createPattern()
   13. createRadialGradient()
   14. drawFocusIfNeeded()
   15. drawImage()
   16. drawWidgetAsOnScreen()
   17. drawWindow()
   18. ellipse()
   19. fill()
   20. fillRect()
   21. fillText()
   22. getImageData()
   23. getLineDash()
   24. getTransform()
   25. isPointInPath()
   26. isPointInStroke()
   27. lineTo()
   28. measureText()
   29. moveTo()
   30. putImageData()
   31. quadraticCurveTo()
   32. rect()
   33. removeHitRegion()
   34. resetTransform()
   35. restore()
   36. rotate()
   37. save()
   38. scale()
   39. scrollPathIntoView()
   40. setLineDash()
   41. setTransform()
   42. stroke()
   43. strokeRect()
   44. strokeText()
   45. transform()
   46. translate()