我一直在尝试创建一个显示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>
3条答案
按热度按时间vyu0f0g11#
这里还有一个方法...
gjmwrych2#
ao218c7q3#
你创建的矩形是1 × 1像素的,并且总是在左上角。你应该计算矩形的宽度/高度(宽度/ 11,高度/ 11)。然后使用这些值平移x和宽度。类似于下面的操作应该有效:
这将计算单元格的宽度和高度,循环遍历每个元素,并根据值用白色或黑色绘制矩形。
您还应该确保在加载主体之后调用drawMatrix函数。