在畫布上顯示11x11矩陣

我一直在試圖創建一個顯示11x11矩陣的畫布。在畫布上顯示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);

然而，當我打開我的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>

來源

2017-04-06 AchillesDH

您正在創建的矩形是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函數在主體加載後調用。

來源

2017-04-06 19:57:29 exceptionthrown

使用您提供的代碼我仍然只有我的畫布出現，沒有別的。 [鏈接]（https://gyazo.com/922a1fdcf4a1bcb59562988fcddd3458）<。我的JS的截圖。 – AchillesDH

在畫布上顯示11x11矩陣

回答

相關問題