You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

初学JS Canvas遇线条无法绘制问题,请求排查指导

Canvas线条无法显示的问题解决

你的代码问题出在JavaScript大小写敏感上,几个Canvas API方法的拼写错误导致线条无法绘制:

  • getcontext → 正确写法是 getContext
  • moveto → 正确写法是 moveTo
  • lineto → 正确写法是 lineTo

修正后的完整代码如下:

<body>
    This is just a test
    <br>
    <canvas id="FirstCanvas" width="300" height="200" style="border:1px solid #000000;">
    </canvas>
</body>

<script>
    var c = document.getElementById("FirstCanvas");
    var ctx = c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();
</script>

<style>
    #FirstCanvas{
        background-color: aquamarine;
    }
</style>

额外提一句:<br></br> 无需闭合,直接写 <br> 即可,不过这不是线条不显示的原因。

内容的提问来源于stack exchange,提问作者Solo_Symphony

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.11 05:22:32