javascript - Whats wrong with my javascript canvas code?

Question

I wrote this js canvas code. It works but it paints half of a canvas angularly. Can I do something to correct this code or I need to fully rewrite it. Is it right to put this code inside setup(). Thank you. https://p5js.org/reference/#/p5/random

var side = 10;
var grassArr = [];
var matrix = [];



console.log(matrix)


function setup() {
    for(var y = 0; y<49; y++){
    matrix[y] = [];
    for(var x = 0; x<49; x++){
let arr = [0,1,2]
let r = random(arr)
matrix[x][y] = r
matrix.push(r)    
}
}


frameRate(5)
 createCanvas(49 * side, 49* side);
  background('#acacac');
}


function draw(){
        for (var y = 0; y < 49; y++) {
for (var x = 0; x < 49; x++) {
        if(matrix[y][x]== 0){
                fill('#acacac')
                rect(x * side, y * side, side, side);
            }
                if(matrix[y][x]== 1){
                fill('green')
                rect(x * side, y * side, side, side);
            }
            if(matrix[y][x]== 2){
                fill('yellow');
                  rect(x * side, y * side, side, side);

            }
        } 
     }
}

标签： javascriptmatrixcanvas

Answer 1

你只是在矩阵构造上有一个小错误。在这里，为您更正。

var side = 10;
var grassArr = [];
var matrix = [];

function setup() {
    for(var y = 0; y<49; y++){
        matrix[y] = [];
        for(var x = 0; x<49; x++){
            let arr = [0,1,2]
            let r = random(arr)
            matrix[y][x] = r;
        }
    }

    frameRate(5)
    createCanvas(49 * side, 49* side);
    background('#acacac');
}


function draw(){
    for (var y = 0; y < 49; y++) {
        for (var x = 0; x < 49; x++) {
            if(matrix[y][x]== 0){
                fill('#acacac')
                rect(x * side, y * side, side, side);
            }
            if(matrix[y][x]== 1){
                fill('green')
                rect(x * side, y * side, side, side);
            }
            if(matrix[y][x]== 2){
                fill('yellow');
                rect(x * side, y * side, side, side);
            }
        } 
     }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>

您在矩阵创建中反转 x 和 y 变量并再次调用 .push ，这在矩阵中生成了许多未定义的位置。

如果您只想在使用您的代码版本创建矩阵后调用 console.log(matrix) ，您会看到很多未定义的值。