Javascript PutImageData 什么都不做答案

【问题标题】：Javascript PutImageData doing nothingJavascript PutImageData 什么都不做
【发布时间】：2021-07-29 03:10:00
【问题描述】：

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

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);
}}

【问题讨论】：

更多上下文可能足以为这个问题提供一个可行的答案。请参阅本指南：stackoverflow.com/help/minimal-reproducible-example

标签： javascript canvas putimagedata imagedata

【解决方案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();

【讨论】：