Canvas绘图失败主因是脚本执行过早导致getContext("2d")调用失败；需确保DOM就绪（如移script至body底部或用DOMContentLoaded事件），并检查canvas元素存在、ID匹配、调用stroke()/fill()及避免CSS拉伸画布。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
Animated Drawings制作失败通常是因为绘图逻辑未在Canvas元素就绪后执行，导致getContext("2d")调用失败并静默中断后续所有绘图操作——此时控制台会抛出TypeError，但页面仅显示空白画布，无任何视觉反馈。
脚本执行时机过早
这是最常见也最隐蔽的失败原因。你的JavaScript代码在HTML解析完成前就运行了，document.getElementById("myCanvas")返回null，ctx变量根本无法创建。
方法一：把script标签移到闭合前
将原本放在
里的<script src="draw.js"></script>剪切，粘贴到
底部、标签正上方。这样能确保DOM树已完整构建，canvas元素真实存在。方法二：用DOMContentLoaded事件包裹绘图逻辑
在draw.js开头写：document.addEventListener('DOMContentLoaded', () => {，然后把所有绘图代码（包括获取canvas、获取ctx、beginPath、moveTo等）全部缩进写在里面，最后补上});。这比window.onload更轻量，不等待图片加载完成。
【关键提醒】如果用了方法二但依然失败，请打开浏览器开发者工具→Console面板，确认是否有“Cannot read property 'getContext' of null”报错——有则说明canvas id写错了或该元素确实没被HTML解析出来。
Canvas元素缺失或ID不匹配
第一步：检查HTML中是否存在
第二步：确认id值与JavaScript中document.getElementById("myCanvas")括号内的字符串逐字符完全一致，包括大小写、下划线、连字符。ID里多一个空格或少一个字母都会导致获取失败。
第三步：确保页面中没有重复的id="myCanvas"。HTML规范要求id全局唯一，若出现两个同名canvas，getElementById只会返回第一个，第二个永远不可达。
这一步操作起来很简单，直接在浏览器地址栏按Cmd+U（Mac）或Ctrl+U（Windows）查看源码，搜索“canvas”即可定位。
未调用stroke()或fill()导致路径不可见
① 调用ctx.beginPath()后必须至少执行一次ctx.moveTo()和ctx.lineTo()（或其他路径绘制命令）
② 绘制完路径后，必须显式调用ctx.stroke()（描边）或ctx.fill()（填充），否则路径只是内存中的数据，不会渲染到画布上
③ 如果你只想要一条线，【closePath()完全不需要】，它只用于闭合形状（比如三角形、矩形），加了反而可能干扰线条端点表现
常见错误写法：ctx.moveTo(10,10); ctx.lineTo(100,100); —— 缺少stroke()，画布上什么都不会出现。
Canvas尺寸被CSS拉伸失真
如果HTML中写的是，但又用CSS设置了.canvas { width: 800px; height: 600px; }，那实际是把400×300像素的画布强行拉伸成800×600，图像会模糊、线条变粗、坐标计算全乱。
正确做法：删掉CSS里的width/height声明，只保留canvas元素自身的width和height属性值；如需响应式，改用JavaScript动态设置canvas.width/canvas.height，并同步重设ctx的transform缩放比例。
验证是否中招：右键画布→“检查元素”，看computed样式里canvas的实际渲染宽高是否等于其HTML属性值。不等就是被CSS拉伸了。
