Question

我一直在尝试创建一个显示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],
];

根据矩阵内的数字，它将创建一个特定颜色的矩形我创建了一个贯穿每个条目的基本功能。

if = 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);

然而，当我使用我的.js文件和我的画布设置加载我的html文件时，除了我应用于画布的样式之外，它不会加载任何东西。

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>

Answer 1

您创建的矩形是1 x 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函数。

在画布上显示11x11矩阵

1 个答案: