Question

对于大多数人来说这是一个简单的问题，但我的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>

JavaScript：

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);
   }
}

任何对无能为力的帮助都会受到赞赏

Answer 1

您必须实际致电setupCanvas

Here's a codepen showing this。如您所见，我刚在代码中添加了一行。我希望这是你想要的结果

为什么我的矩形不会出现？

1 个答案: