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
- 苹果浏览器
相关用法
- HTML canvas arc()用法及代码示例
- HTML canvas stroke()用法及代码示例
- HTML canvas rect()用法及代码示例
- HTML canvas addColorStop()用法及代码示例
- HTML canvas transform()用法及代码示例
- HTML canvas fill()用法及代码示例
- HTML canvas closePath()用法及代码示例
- HTML canvas moveTo()用法及代码示例
- HTML canvas fillRect()用法及代码示例
- HTML canvas quadraticCurveTo()用法及代码示例
- HTML canvas clip()用法及代码示例
- HTML canvas putImageData()用法及代码示例
- HTML canvas createLinearGradient()用法及代码示例
- HTML canvas arcTo()用法及代码示例
- HTML canvas getImageData()用法及代码示例
注:本文由纯净天空筛选整理自shubham_singh大神的英文原创作品 HTML | canvas createImageData() Method。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。