HTML中canvas如何绘制圆形和弧线-html教程-PHP中文网

arc()不显示圆是因为它只添加路径而不渲染，需配合beginpath()、stroke()/fill()及正确颜色设置；参数中角度须用弧度，圆心不能越界。

html中canvas如何绘制圆形和弧线

直接画圆必须用 arc()，但只调用它什么都不会显示——它只是“加一段路径”，不是“画出来”。

为什么 `arc()` 调用了却没看到圆

这是最常卡住的地方：canvas 的绘图是分阶段的，arc() 只负责把圆弧路径塞进当前路径里，不触发渲染。

漏掉 ctx.beginPath()：上一次路径残留可能让新弧线被错误连接或闭合，甚至压根不生效
没调用 ctx.stroke() 或 ctx.fill()：路径存在，但没描边/填充，等于白建
忘记设 ctx.strokeStyle 或 ctx.fillStyle：默认黑色描边、透明黑填充（#00000000），在深色背景上完全不可见
圆心坐标超出 canvas 范围，比如 canvas.width = 200 却写 arc(300, 300, 10, ...)，圆心在画布外，弧线自然不出现

`arc()` 的 5 个参数怎么填才不翻车

函数签名是 ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)，后两个参数可选，但前 5 个全要填。

HTML汇报生成器

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

下载

x 和 y 是圆心坐标，以 canvas 左上角为原点，不是相对于当前路径起点
radius 必须 ≥ 0；传负数、NaN 或 undefined 会静默失败（无报错，也无图形）
startAngle 和 endAngle 单位是**弧度**，不是度数；常见错误是写 90 或 180 —— 这其实是 90 弧度（≈5157°），正确写法是 Math.PI / 2（90°）、Math.PI（180°）
anticlockwise 默认 false（顺时针）；设 true 才逆时针。注意：它不改变角度数值含义，只改变绘制方向；即使 startAngle > endAngle，设 false 仍会顺时针绕过 0 弧度

画整圆和画弧线的区别与写法

画整圆只是画弧线的一个特例：起始角为 0，结束角为 2 * Math.PI，方向无所谓（因为绕满一圈结果一样）。

画整圆（描边）：ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI); ctx.stroke();
画整圆（填充）：ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI); ctx.fill();
画四分之一圆弧（从 3 点钟到 6 点钟方向，顺时针）：ctx.beginPath(); ctx.arc(100, 75, 50, 0, Math.PI / 2); ctx.stroke();
画扇形（带填充的圆弧区域）：需要补两条半径线 + closePath()，再 fill()

真正容易被忽略的是：canvas 绘图依赖精确的状态管理。一个没清空的路径、一个没重置的颜色、一次忘记的 beginPath()，都可能导致后续所有 arc() 表现异常——它不像 CSS 那样“所见即所得”，而更像一条需要手动拼装、手动触发的流水线。