爲什麼這段代碼不在畫布上畫一個正方形？

-1

我無法理解爲什麼我的代碼不會在畫布上繪製方形邊框。我剛開始學習這個東西，我畏懼，我失去了一些東西明顯...爲什麼這段代碼不在畫布上畫一個正方形？

<!DOCTYPE html> 
<head> 
<style type="text/css"> 
canvas { 
    background-image: url(uploads/1504975677.jpg); 
    width: 500px; 
    height: 334px; 
} 
</style> 
<script type="text/javscript"> 
    var x = 100; 
    var y = 100; 
    var width = 50; 
    var height = 50; 
    var canvas = document.getElementById('image'); 
    var context = canvas.getContext('2d'); 

    context.strokeStyle = 'white'; 
    context.strokeRect(x, y, width, height); 
</script> 
<title>Test Website</title> 
</head> 
<body> 
    <canvas id="image"></canvas> 
</body> 
</html>

爲了澄清，我並不想創建畫布邊緣，我只想要一個盒子，沒有被填充。我用這個代碼得到的只是背景圖片，沒有任何東西被繪製在上面。

來源

2017-09-09 Deanie

也請刪除拼寫錯誤類型=「文/ javscript 「，是HTML5的默認設置。 –

下面的格式應該把你的腳本關閉標記之前，也改變了顏色:-P

<!DOCTYPE html> 

<head> 
    <style type="text/css"> 
    canvas { 
     background-image: url(uploads/1504975677.jpg); 
     width: 500px; 
     height: 334px; 
    } 

    </style> 
    <title>Test Website</title> 
</head> 

<body> 
    <canvas id="image"></canvas> 

    <script type="text/javscript"> 
    var x = 100; var y = 100; var width = 50; var height = 50; var canvas = document.getElementById('image'); var context = canvas.getContext('2d'); context.strokeStyle = 'black'; context.strokeRect(x, y, width, height); 
    </script> 
</body> 

</html>

var x = 100; var y = 100; var width = 50; var height = 50; var canvas = document.getElementById('image'); var context = canvas.getContext('2d'); context.strokeStyle = 'black'; context.strokeRect(x, y, width, height);

canvas { 
 
    width: 500px; 
 
    height: 334px; 
 
}

<canvas id="image"></canvas>

來源

2017-09-09 19:05:22 bhansa

試着解釋爲什麼這會起作用，爲什麼原始代碼沒有。 –

拼寫錯誤似乎是唯一的錯誤。 TY。 – Deanie

爲什麼這段代碼不在畫布上畫一個正方形？

回答

相關問題