JavaScript将图像数据放在画布上_Javascript_Html_Css_Html5 Canvas

JavaScript将图像数据放在画布上

javascript html css html5-canvas

JavaScript将图像数据放在画布上,javascript,html,css,html5-canvas,Javascript,Html,Css,Html5 Canvas,我有下面的代码，它创建了一个矩形，如下图所示： <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <p id='on

我有下面的代码，它创建了一个矩形，如下图所示：

<!DOCTYPE html>
<html>
<body>
  <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
  </canvas>
  <p id='one'></p>

  <script>

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = 'black';
    ctx.fillRect(20, 20, 40, 40)
    var imgData = ctx.createImageData(100, 100);
    var i;
    for (i = 0; i < imgData.data.length; i += 16) {
      imgData.data[i + 0] = 255;
      imgData.data[i + 1] = 0;
      imgData.data[i + 2] = 0;
      imgData.data[i + 3] = 255;
    }
    // ctx.putImageData(imgData, 10, 10);

  </script>
</body>
</html>


您的浏览器不支持HTML5画布标记。

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.fillStyle='黑色'；
ctx.fillRect（20,20,40,40）
var imgData=ctx.createImageData（100100）；
var i；
对于（i=0；i





当我通过不注释ctx.putImageData
来确保添加图像数据时，我只得到如下所示的图像数据：



如何确保图像创建在黑色矩形的顶部，即在红线之间的空白处？

我希望能够看到黑色的矩形。我试着改变阿尔法通道，但没有任何效果
提前感谢：）。
我无法使用精确的代码，但当我尝试使用两个图像重叠时，我成功地使它们重叠



var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var img=ctx.createImageData（100100）；
var i；
对于（i=0；i
我无法使用精确的代码，但当我尝试使用两个重叠的图像时，我成功地使它们重叠



var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var img=ctx.createImageData（100100）；
var i；
对于（i=0；i
putImageData
将用ImageData中包含的像素替换目标像素，无论它们是什么。

这意味着，如果ImageData包含透明像素，那么一旦将ImageData放到画布上，这些透明像素就会出现
不过，有几种方法可以实现您的目标
需要较少代码更改的一个是从上下文的当前状态进行像素操作。通过调用而不是createImageData
，您将获得一个ImageData，其中包含选定区域中当前绘制的像素

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.fillStyle='黑色'；
ctx.fillRect（20,20,40,40）；
//获取（x、y、宽度、高度）处的当前像素
var imgData=ctx.getImageData（10,10100100）；
var i；
//然后对这些像素进行像素操纵
对于（i=0；i
putImageData
将用ImageData中包含的像素替换目标像素，无论它们是什么。

这意味着，如果ImageData包含透明像素，那么一旦将ImageData放到画布上，这些透明像素就会出现
不过，有几种方法可以实现您的目标
需要较少代码更改的一个是从上下文的当前状态进行像素操作。通过调用而不是createImageData
，您将获得一个ImageData，其中包含选定区域中当前绘制的像素

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.fillStyle='黑色'；
ctx.fillRect（20,20,40,40）；
//获取（x、y、宽度、高度）处的当前像素
var imgData=ctx.getImageData（10,10100100）；
var i；
//然后对这些像素进行像素操纵
对于（i=0；i