Canvas 绘制直线不显示，通常是因为 JavaScript 方法名大小写错误（如 getcontext 应为 getContext），本文详解正确用法、完整可运行示例及关键注意事项。
canvas 绘制直线不显示，通常是因为 javascript 方法名大小写错误（如 `getcontext` 应为 `getcontext`），本文详解正确用法、完整可运行示例及关键注意事项。
在使用 HTML5 <canvas> 进行绘图时，初学者常遇到“线条画不出来”的问题。从你提供的代码来看，核心问题并非逻辑或结构错误，而是 JavaScript 中方法名严格区分大小写 —— 这是导致绘图完全失效的典型低级但高频错误。
以下是原始代码中的三处关键拼写错误：
- c.getcontext("2d") → 应为 c.getContext("2d")
- ctx.moveto(0,0) → 应为 ctx.moveTo(0,0)
- ctx.lineto(200,100) → 应为 ctx.lineTo(200,100)
修正后的完整可运行示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Canvas 绘制直线示例</title>
<style>
#FirstCanvas {
background-color: aquamarine;
margin: 10px 0;
}
</style>
</head>
<body>
<p>This is just a test</p>
<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(0, 0); // ✅ 正确：moveTo
ctx.lineTo(200, 100); // ✅ 正确：lineTo
ctx.stroke(); // ✅ 绘制路径（无 stroke() 则无视觉输出）
</script>
</body>
</html>? 关键注意事项：
立即学习“Java免费学习笔记（深入）”；
- getContext("2d") 是获取 2D 渲染上下文的唯一合法方法名，任何大小写变体（如 getcontext、GetContext）均返回 null，后续调用会直接报错（如 Cannot read property 'moveTo' of null）。
- 调用 moveTo() 和 lineTo() 前，建议始终以 beginPath() 开始新路径，避免受上一次绘制残留路径影响。
- stroke() 必须显式调用才能真正渲染线条；仅定义路径不会自动显示。
- 确保 <script> 在 <canvas> 元素之后执行，或使用 DOMContentLoaded 事件包裹逻辑，防止 DOM 尚未加载完成就尝试获取元素。
✅ 总结：Canvas API 是大小写敏感的纯 JavaScript 接口，所有标准方法均采用 camelCase（小驼峰）命名规范。养成查阅 MDN CanvasRenderingContext2D 文档 的习惯，可大幅减少此类问题。调试时，打开浏览器开发者工具（F12），查看 Console 是否有 TypeError 提示，往往能快速定位拼写错误。
