当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


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。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。