javascript 在画布上显示11x11矩阵

zwghvu4y 于 2023-01-07 发布在 Java

关注(0)|答案(3)|浏览(183)

我一直在尝试创建一个显示11x11矩阵的画布。

const canvas = document.getElementById('canvasGame');
const context = canvas.getContext('2d');

context.scale(10, 10);

context.fillstyle = '#000';
context.fillstyle(0,0, canvas.width, canvas.height);

const matrix = [
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
];

根据矩阵中的数字，它将创建一个特定颜色的矩形。
我创建了一个基本函数来遍历每个条目。
如果= 0，则为白色矩形。
否则为黑色矩形。

function drawMatrix(matrix){
    matrix.forEach((row, y) =>{
        row.forEach((value, x) => {
            if(value === 0) {
                context.fillStyle = 'white';
                context.fillRect(x, y, 1, 1);
            }
            else
            {
                context.fillStyle = 'black';
                context.fillRect(x, y, 1, 1);
            }
        });
    });
}

drawMatrix(matrix);

然而，当我加载我的html文件与我的.js文件和我的画布设置，它没有加载任何东西，除了我已经应用到我的画布样式。
Screenshot: What it loads.
我的HTML，如果这重要的话。

<html>
<head>
    <title>Testing Grounds</title>
    <style>
      body {
        background: #345;
        color: #fff;
        font-family: sans-serif;
        font-size: 2em;
        text-align: center;
      }
      canvas {
        border: dashed .2em #fff;
        height: 90vh;
      }
    </style>
</head>
<body>
    <h1>Test Zone</h1>
    <p>Using a canvas to display 11x11 matrix</p>
    <canvas id="canvasGame" width="350" height="350"/>
    <script src="app.js"></script>
</body>
</html>

JavaScript

来源：https://stackoverflow.com/questions/43264470/displaying-an-11x11-matrix-on-a-canvas

3条答案

按热度按时间

vyu0f0g11#

这里还有一个方法...

const canvas1 = document.getElementById('canvas1');
const context1 = canvas1.getContext('2d');
const canvas2 = document.getElementById('canvas2');
const context2 = canvas2.getContext('2d');

//context.scale(canvas.height / 16, canvas.height / 16);

matrix = [
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  [1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1],
  [1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
  [1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1],
  [1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
  [1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1],
  [1, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 1],
  [1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
  [1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1],
  [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
];

function drawMatrix(matrix) {
  z = matrix.map((c) => c.map((c) => c == 0 ? [255, 255, 255, 255] : [0, 0, 0, 255]));
  i = new ImageData(Uint8ClampedArray.from(z.flat(2)), 12)
  context1.putImageData(i, 0, 0);
  context2.scale(16, 16);
  context2.webkitImageSmoothingEnabled = false;
  context2.mozImageSmoothingEnabled = false;
  context2.imageSmoothingEnabled = false;
  context2.drawImage(canvas1, 0, 0);

}

drawMatrix(matrix);

<center><canvas hidden id="canvas1" width=12 height=12></canvas></center>
<center><canvas id="canvas2" width=192 height=192></canvas></center>

赞(0）回复(0）举报 2023-01-07

gjmwrych2#

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

// every drawn pixel will be 16 times bigger
context.scale(canvas.height / 16, canvas.height / 16);

const matrix = [
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  [1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1],
  [1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
  [1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1],
  [1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
  [1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1],
  [1, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 1],
  [1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
  [1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1],
  [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
];

function drawMatrix(matrix) {

  // write all pixels cycling thru rows and columns
  matrix.forEach((row, y) => {
    row.forEach((value, x) => {
      context.fillStyle = value && "black" || "white";
      context.fillRect(x, y, 1, 1);
    });
  });
}

drawMatrix(matrix); // draw the matrix

<center><canvas id="canvas" width=192 height=192></canvas></center>

赞(0）回复(0）举报 2023-01-07

ao218c7q3#

你创建的矩形是1 × 1像素的，并且总是在左上角。你应该计算矩形的宽度/高度（宽度/ 11，高度/ 11）。然后使用这些值平移x和宽度。类似于下面的操作应该有效：

function drawMatrix(matrix){
    var cellWidth = canvas.width / 11.0;
    var cellHeight = vanvas.height / 11.0;

    matrix.forEach((row, y) =>{
        row.forEach((value, x) => {
            context.fillStyle = cellColor(value);
            context.fillRect(x * cellWidth, y * cellHeight, cellWidth, cellHeight);
        });
    });
}
function cellColor(val) {
    if(value == 0)
    {
        return 'white';
    }

    return 'black';
}

drawMatrix(matrix);

这将计算单元格的宽度和高度，循环遍历每个元素，并根据值用白色或黑色绘制矩形。
您还应该确保在加载主体之后调用drawMatrix函数。

赞(0）回复(0）举报 2023-01-07

我来回答

javascript 在画布上显示11x11矩阵

3条答案

相关问题

热门标签

最新问答