Question

我尽最大努力未能成功在HTML5画布中渲染1个像素的3D阵列。

（我知道之前已经完成过，但3D阵列还没有完成）。但是将3D数组转换为Uint8ClampedArray并推送到Uint8ClampedArray并不容易。

HTML5还没有其他显示像素可操作图像的方法。

putImageData（）用于渲染垂直像素字符串是否正确？

这是我的代码，问题标有：“我在这里做什么？”

<!DOCTYPE html>
<html lang="en" + dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title>
      Index.html
    </title>
  </head>
  <body style="margin: 0px; padding: 0px;">
    <canvas id="canvas">
    </canvas>
    <script>
      let a = new Array();
      a.push([]);
      a[x.length - 1].push([]);
      a[x.length - 1][a[a.length - 1].length - 1].push(0);
      a[x.length - 1][a[a.length - 1].length - 1].push(0);
      a[x.length - 1][a[a.length - 1].length - 1].push(0);
      a[x.length - 1][a[a.length - 1].length - 1].push(255);
      document.getElementById("canvas").getContext("2d").putImageData(new 
      ImageData(new Uint8ClampedArray("WHAT DO I GOTTA DO HERE"), 1, 1), 1, 
      1);
    </script>
  </body>    
</html>

要对其进行测试，可以使用：

console.log(a);
console.log(a[0]);
console.log(a[0][0]);
console.log(a[0][0][0]);

Answer 1

您已经创建了一个普通的Javascript数组-您只需要将其转换为限定数组即可。在我的头顶上，像这样：

document.getElementById("canvas").getContext("2d").putImageData(new 
  ImageData(Uint8ClampedArray.from(x), 1, 1), 1, 1);

（或将您的数据写入新的Uint8ClampedArray中）

Answer 2

绘图200×200红块到画布上。需要<form [formGroup]="labels" (ngSubmit)="logForm()"> <ion-item> <ion-label>Time Date:</ion-label> <ng2-flatpickr formControlName="time_date"></ng2-flatpickr> </ion-item> </form>

我建议不要使用3D阵列，因为这似乎不必要地复杂

<canvas></canvas>

Answer 3

我有解决方案，并且可行，我想发表文章以为Stack Overflow社区做出贡献，因此下一个遇到此问题的人可以很容易地做到这一点。

就像上面一样，它是一个简化版本：

<!DOCTYPE html>
<html lang="en" + dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>
      Google Chrome, I suppose
    </title>
  </head>
  <body style="background-color: black; margin: 0px; margin-bottom: 0px; padding: 0px;">
    <canvas style="image-rendering: pixelated" id="canvas">
    </canvas>
    <script>
      var t =
      [
        240,
        128
      ];
      document.getElementById('canvas').width = t[0];
      document.getElementById('canvas').height = t[1];
      var a = new Array()
      {
        a.push([]);
        a[a.length - 1].push([]);
        a[a.length - 1][a[a.length - 1].length - 1].push(127, 127, 127, 255);
      }
      var i = 0;
      document.getElementById('canvas').getContext('2d').putImageData(new ImageData(Uint8ClampedArray.from
      (
        [].concat.apply
        ([],
          a[i]
        )
      ), 1), i, 0);
      i = i + 1;
      i = 0;
    </script>
  </body>
</html>

如您所见，我已将变量x替换为a。

我希望这也可以帮助其他人，并感谢大家的建议！

使用putImageData（）和UInt8ClampedArray从HTML5 Canvas中的3D数组渲染1个像素

3 个答案: