HTML畫布函數

我一直在編寫一些HTML畫布代碼以創建一個風景。代碼將無法正確執行。我的語法錯誤是什麼？謝謝，本傑明HTML畫布函數

var canvas = document.getElementById("mycanvas"); 
var ctx = canvas.getContext("2d"); 
var llocation = 600; 
var length = 360; 
var linewidth = 2; 
var testInt = length/(linewidth*2); 
var wColour = "#994c00"; 
function isEven(value) { 
if (value%2 == 0) 
    return true; 
else 
    return false; 
} 
for(i=0;i<testInt+1;i++){ 

    if(isEven(i)==true){ 
     var wColour = "#994c00"; 
    } 
    else if(isEven(i)==false){ 
     var wColour = "#B87333"; 
    } 

    ctx.beginPath(); 
    ctx.strokeStyle = wColour; 
    ctx.lineWidth = linewidth; 
    ctx.rect(llocation,300,length,250); 
    ctx.stroke(); 
    ctx.closePath(); 
    var llocation = llocation + linewidth; 
    var length = length - (linewidth*2); 
}

來源

2015-12-04 Benjamin Walker

您是否在控制檯中發現任何錯誤？ –

無法加載資源：net :: ERR_FILE_NOT_FOUND –

注意*當我刪除故障功能時，最後一個函數drawGround不再起作用。 –

javascript的位置和順序很重要。在最簡單的級別，JavaScript代碼按其在頁面上顯示的順序執行。這意味着如果您在文件foo.js中有一個功能function foo()，並嘗試從上面加載文件foo.js的腳本調用該函數，它將失敗，因爲該函數尚未加載。

爲了最安全的方式將所有代碼放在頁面的底部，在關閉</body>標籤之前使用包含調用函數的代碼上面的函數的文件。

對於您訪問的元素也是如此。如果您正在上面的腳本中訪問canvas元素所在的canvas元素，則該元素將失敗，因爲canvas元素尚未加載並且不存在。

或者，您可以使用加載事件文檔來啓動代碼。這將確保所有內容都已被加載並解析爲您的代碼。

document.addEventListener("load",function(){ 
    // your code 
});

來源

2015-12-04 02:02:52 Blindman67

我其實剛剛發現，函數的順序不是問題。抱歉!更新的代碼中只有一個語法。謝謝！ –

沒問題，很高興你把它分類。順便說一句，當我第一次看到你的問題，我發現你在頁面的頂部有Javascript。只是爲了讓您知道，將代碼放在'head'或'body'之外會使瀏覽器進入Quirks模式，並會影響代碼的性能和頁面的佈局。最好將腳本保存在正確的位置。 – Blindman67

謝謝，我現在還不知道那裏的代碼的語法錯誤。 –

回答

相關問題