必须先调用getcontext('2d')获取2d上下文才能画圆,因canvas自身无绘图能力;漏此步则arc()等方法静默失效;还需配合beginpath()、fillstyle、fill()三步缺一不可,且角度须用弧度(如2*math.pi)。

canvas画圆前必须先获取2D绘图上下文
直接写 <canvas></canvas> 标签不会自动绘图,必须用 JavaScript 获取其 getContext('2d') 才能操作。没这步,所有绘图方法(包括画圆)都无效。
常见错误是只写了 HTML 但忘了 JS 初始化,页面一片空白还查不出原因。
- 确保
<canvas></canvas>有明确的width和height属性(不是 CSS 宽高),否则默认尺寸为 300×150,可能被裁剪或缩放 - JS 必须在 DOM 加载完成后执行,推荐放在
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











