0

我正在创建一个window显示canvas。首先我做了一个例子JSON来测试，但我的代码不起作用。我希望它像这样显示（忽略黑线）： 示例窗口

但它显示如下： 截图窗口

（如果图像太大，我可以调整它们的大小）

我的代码：

<!DOCTPYE html>
<html>

<head>
  <title>Özel OS</title>
  <style>
    canvas {
      height: 450px;
      width: 800px;
      border: 1px solid blue;
    }
  </style>
</head>

<body>
  <h1>Monitör:</h1>
  <canvas id="monitor">Tarayıcınız HTML Canvas özelliğini desteklemiyor.</canvas>
  <script>
    const ch = 450;
    const cw = 800;
    var c = document.getElementById('monitor');
    var ctx = c.getContext('2d');

    const pixels = [
      [
        [100, 150, 50],
        [10, 60, 210]
      ],
      [
        [150, 100, 10],
        [60, 210, 10]
      ]
    ];

    const rows = pixels.length;
    const columns = pixels[0].length;

    const sr = ch / rows;
    const sc = cw / columns;

    console.log(sc);

    for (let y = 0; y < rows; y++) {
      for (let x = 0; x < columns; x++) {
        let colors = pixels[y][x];

        console.log(colors);

        console.log(x * sc, y * sr);

        ctx.fillStyle = "rgba(" + colors[0] + "," + colors[1] + "," + colors[2] + ",255)";
        ctx.fillRect(x * sc, y * sr, sc, sr);

      }
    }
  </script>
</body>

</html>

4

0 回答 0