为什么这段代码不在画布上画一个正方形？

-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

为什么这段代码不在画布上画一个正方形？

回答

相关问题