4x4畫布繪圖中的邏輯錯誤

Question

當我按Ctrl + A突出顯示我繪製的所有畫布，最後一行似乎是空白或全部組合。我正在嘗試製作一個4x4的油畫網格。我的邏輯錯誤是什麼？

var count = 0; 
while (count < 16) { 
    if (count % 4 == 0) 
     document.write("<br><canvas id = \"canvas_ \" + count + \" width = \"50\" height = \"  50\"></canvas>"); 
    else 
     document.write("<canvas id = \"canvas_ \" + count + \" width = \"50\" height = \" 50\"></canvas>"); 
    count++; 
} 

Answer 1

我已經重寫你的代碼位：

var count = 0; 
while (count < 16) { 
    if (count % 4 == 0) 
     document.write('<br>'); 
    document.write('<canvas id="canvas_' + count + '" width="50" height="50"></canvas>'); 
    count++; 
} 
document.write('<br>'); 

其他不僅僅是提高了編碼風格的方式（例如，使用這兩種引號的），我增加了一個<br>在結束，因爲這是導致最後一行不被選中的原因。

添加canvas { border: 1px solid #000 }使它看起來像這樣：

Answer 2

你的代碼是好的，但是當你按下CTRL +一個僅元素<br/>接縫它沒有選擇該畫布元素。它將在最後添加一個<br/>時起作用。而且你的代碼計數中的錯誤也在字符串內。

var count = 0; 
document.write("<br>"); 
while (count < 16) { 
    document.write("<canvas id=\"canvas_" + count + "\" width=\"50\" height=\"50\"></canvas>"); 
    count++; 
    if (count % 4 == 0) { 
     document.write("<br>"); 
    } 
}