Javascript PutImageData 什么也不做

Question

我正在使用以下代码在运行时将 canvas 替换为纯色。问题是在创建图像时它没有映射到 canvas.

function draw() {
  var canvas = document.querySelector('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    const width = canvas.width;
    const height = canvas.height;
    var img = ctx.createImageData(width,height);
  for (var i = 0; i < img.data.length; i += 4) {
    img[i] = 20;
    img[i+1] = 125;
    img[i+2] = 0;
    img[i+3] = 255;
  }
  
    ctx.putImageData(img, 0, 0);
}}

Answer 1

您在尝试访问和更改每个索引时忘记添加 .data

function draw() {
  var canvas = document.querySelector('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    const width = canvas.width;
    const height = canvas.height;
    var img = ctx.createImageData(width,height);
  for (var i = 0; i < img.data.length; i += 4) {
    img.data[i] = 20;
    img.data[i+1] = 125;
    img.data[i+2] = 0;
    img.data[i+3] = 255;
  }
  
    ctx.putImageData(img, 0, 0);
}}
draw();

Javascript PutImageData 什么也不做

Javascript PutImageData doing nothing

javascript

canvas

putimagedata

imagedata