Canvas 绘制线条不显示，通常是因为方法名大小写错误（如 getcontext 应为 getContext），或未正确调用绘图路径方法。本文详解典型错误、修正步骤及完整可运行示例。
canvas 绘制线条不显示，通常是因为方法名大小写错误（如 `getcontext` 应为 `getcontext`），或未正确调用绘图路径方法。本文详解典型错误、修正步骤及完整可运行示例。
在使用 HTML5 <canvas> 进行基础绘图时，一个看似微小却极易被忽略的问题，就是 JavaScript 方法名的严格大小写敏感性。初学者常因拼写习惯（如将 getContext 写成 getcontext）导致整个绘图流程静默失败——既无报错，也无图形渲染。
以下是你原始代码中的关键错误点：
- ❌ c.getcontext("2d") → 正确应为 c.getContext("2d")
- ❌ ctx.moveto(0,0) → 正确应为 ctx.moveTo(0, 0)
- ❌ ctx.lineto(200,100) → 正确应为 ctx.lineTo(200, 100)
这些方法均遵循 camelCase（驼峰命名） 规范，首字母小写，后续单词首字母大写。任何大小写偏差都会使 JS 解析为未定义的方法，调用时返回 undefined，进而导致 stroke() 无路径可绘制。
✅ 修正后的完整可运行代码如下：
立即学习“Java免费学习笔记（深入）”；
<!DOCTYPE html>
<html>
<head>
<title>Canvas Line Drawing</title>
<style>
#FirstCanvas {
background-color: aquamarine;
margin: 10px 0;
}
</style>
</head>
<body>
This is just a test<br>
<canvas id="FirstCanvas" width="300" height="200" style="border: 1px solid #000000;"></canvas>
<script>
const canvas = document.getElementById("FirstCanvas");
const ctx = canvas.getContext("2d"); // ✅ 正确：getContext
ctx.beginPath(); // ✅ 推荐显式开始路径（虽非绝对必需，但最佳实践）
ctx.moveTo(50, 50); // ✅ 正确：moveTo
ctx.lineTo(250, 150); // ✅ 正确：lineTo
ctx.strokeStyle = "#ff4444";
ctx.lineWidth = 2;
ctx.stroke(); // ✅ 现在能正常绘制红色斜线
</script>
</body>
</html>⚠️ 注意事项：
- beginPath() 并非强制，但在多次绘图时建议调用，避免前序路径意外参与当前绘制；
- 确保 <script> 在 <canvas> 元素之后执行，或使用 DOMContentLoaded 事件包裹逻辑；
- 检查浏览器控制台（F12 → Console）——若存在 TypeError: ctx.moveto is not a function 类似提示，即为典型大小写错误信号；
- 所有 Canvas 2D API 方法（如 arc()、fillRect()、drawImage()）均区分大小写，请以 MDN Web Docs 官方文档为准。
总结：Canvas 绘图失败，90% 的“神秘消失”源于大小写拼写错误。养成查阅官方 API 命名的习惯，并善用浏览器开发者工具实时验证上下文对象方法是否存在，是快速定位与修复问题的关键。
