Question

我已创建了画布，但无法在其上绘制线条。这是我用JavaScript编写的。一切正常，但线条不会显示。

<canvas id="gameCanvas" width="600" height="600"> 
    Sorry, your browser does not support the canvas tag.
</canvas>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script language="javascript" type="text/javascript">
    var c = document.getElementById("gameCanvas");
    var ctx = c.getContext("2d);
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);
    ctx.beginPath();
    ctx.moveTo(0, 100);
    ctx.lineTo(600,100);
    ctx.stroke();
</script>

Answer 1

当我打开JavaScript控制台时，您的脚本会显示以下错误：

SyntaxError: unterminated string literal
var ctx = c.getContext("2d);

你能发现失踪的"吗？ :)

一般来说，I would encourage you to regularly use a good JavaScript debugging / development tool就像Chrome开发工具或Firebug一样。

Answer 2

只是一些小错误（缺少引号）：

<canvas id="gameCanvas" width="600" height="600" style="border:1px solid #000000"> 
        Sorry, your browser does not support the canvas tag.
</canvas>

<script type="text/javascript">
  var c = document.getElementById("gameCanvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "#FF0000";
  //ctx.fillRect(0,0,150,75);
  ctx.beginPath();
  ctx.moveTo(0, 100);
  ctx.lineTo(600,100);
  ctx.stroke();



</script>

可以在我的HTML5画布上绘图

2 个答案: