canvas 标签本身不绘图，必须通过 javascript 调用 getcontext("2d") 获取 2d 渲染上下文才能绘图；需先用 document.getelementbyid() 获取 canvas 元素，且宽高须用 html 属性而非 css 设置，否则导致失真；绘图前须注意坐标系、fillstyle、beginpath() 及手动清屏等默认状态问题。

canvas 标签本身不画任何东西，它只是个“空画布”，必须配合 JavaScript 的 getContext("2d") 才能开始绘图。直接写 <canvas></canvas> 页面上什么也不会出现。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

怎么获取绘图上下文（getContext("2d")）

这是所有操作的前提，漏掉这步就等于没开工。

• 必须先用 document.getElementById() 拿到 canvas 元素，不能直接对 querySelector 返回的节点调用 getContext 后再赋值给变量——顺序错了会报 Cannot read property 'getContext' of null
• getContext("2d") 返回的是一个 2D 渲染上下文对象，不是 DOM 节点，后续所有绘图方法（如 fillRect、strokeText）都挂在这个对象上
• 如果页面还没加载完就执行 JS，getElementById 可能返回 null；建议把脚本放在

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！