Question

我刚刚开始学习如何使用HTML5画布，我正在尝试制作一个简单的方块，但我得到的是一个空白屏幕，我不会在Chrome控制台中出现错误

<!Doctype html>
<html>
<head>
<title>Drawing to a canvas</title>

<script type="text/javascript" language="javascript" >
window.onload = draw;
function draw() 
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgba(0,200,0,1)";

ctx.fillRect = (36,10,50,50);

}

</script>
</head>
<body>

<canvas id="canvas1" width="400" height="300">
This text is displayed if your browser 
does not support HTML5 Canvas.
</canvas>

</body>

</html>

这看起来很简单，但它对我不起作用！

Answer 1

请在寻求帮助之前进行调试！

您遇到语法错误，因为您忘记了函数名后的{。

function draw() {
    var canvas = document.getElementById("canvas1");
    var ctx = canvas.getContext("2d");

    ctx.fillStyle = "rgba(0,200,0,1)";

    ctx.fillRect(36,10,50,50);
}

Answer 2

一个错误是Elon指出的错误，但你也使用了fillRect错误：

ctx.fillRect = (36,10,50,50);

应该是：

ctx.fillRect(36,10,50,50);

无法让HTML5画布在任何浏览器上运行

2 个答案: