Javascript 为什么不'；我的矩形没有出现吗？_Javascript_Html

Javascript 为什么不'；我的矩形没有出现吗？

javascript html

Javascript 为什么不'；我的矩形没有出现吗？,javascript,html,Javascript,Html,对你们大多数人来说，这是一个简单的问题，但我对我的HTML或JavaScript有一个问题。我试图在运行代码时显示一些矩形。我遇到了所有熟悉的空白屏幕。以下是HTML： <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="../css/myCanvas.css"/> <script type="text/javascript" src="../

对你们大多数人来说，这是一个简单的问题，但我对我的HTML或JavaScript有一个问题。我试图在运行代码时显示一些矩形。我遇到了所有熟悉的空白屏幕。以下是HTML：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/myCanvas.css"/>
<script type="text/javascript" src="../js/rectangles.js">
</script>
<meta charset="UTF-8">
<title>Canvas Example</title>
</head>
<body>
<canvas id="lessonCanvas" width="300" height="300" style="margin:100px;">
<p>This example requires a browser that supports the <a      href="http://www.w3.org/html/wg/html5/">HTML5</a> canvas feature.</p>
</canvas>
</body>
</html>

如果您需要帮助，我们将不胜感激

您必须实际致电

setupCanvas

。正如您所看到的，我只是在代码中添加了一行。我希望这是您想要的结果

什么会导致

setupCanvas（）

运行？感谢您的回复和编辑。正如Samau5和您自己所说，我需要调用setupCanvas（）。非常感谢您的帮助。谢谢您的帮助和回复。这就是我想要的结果。

function setupCanvas() {
var canvas = document.getElementById('lessonCanvas');
if (canvas.getContext) {
  var ctx = canvas.getContext('2d');

    ctx.strokeRect(0, 0, 200, 200);
    ctx.strokeStyle = 'rgb(255, 0, 0)';
    ctx.strokeRect (0.5, 0.5, 100, 100);
    ctx.fillRect (20, 20, 100, 100);
    ctx.fillStyle = 'rgb(0, 255, 0)'
    ctx.fillRect (50, 50, 100, 100);
    ctx.clearRect (80, 80, 30, 30);
   }
}