1. 这事得从一次糟糕的柱状图改版说起大概是一年多前我在给内部某个数据报表平台做视觉升级设计师给了一张特别漂亮的环形进度图。当时我第一反应是这不就 Canvas 画个圆弧的事吗结果真正动手才发现坑比想象中多得多——设备像素比导致的锯齿、圆弧端点对不齐、动画进度比例算错、数据标签忽上忽下……我意识到“在 Canvas 上画圆”这件事看似基础其实是很多人从“会写代码”到“真正搞定前端可视化”之间的一道坎。圆是最简单的几何图形但围绕它展开的坐标映射、高精度渲染、动效调度、设备适配全都是数据可视化项目里绕不开的底层能力。这篇内容就围绕“js 画圆”展开。我会从 Canvas 基础坐标系讲起到弧度制、圆形数据映射、环形图、饼图、仪表盘、自适应与动效再到一套可以复用的数据可视化思路。最后会有几个我在真实项目中踩过的坑和排查链路希望帮你少走弯路。适合人群刚接触 Canvas 的前端开发者准备用原生 JS 做数据可视化的朋友以及那些已经用了可视化库、但想知道底层渲染原理的人。2. 画圆之前必须先搞懂的三个底层问题2.1 坐标系不是数学坐标系y 轴是反的很多人第一笔圆弧画出来是歪的根本原因不是 API 用错而是没有把“Canvas 坐标系”和“数学坐标系”区分清楚。Canvas 的坐标系原点在左上角x 轴向右为正y 轴向下为正。数学课本里的坐标系y 轴向上为正圆心一般在图形中心。两者一组合你按数学直觉去计算角度位置画出来的东西就会上下颠倒、角度错位。我在画仪表盘指针时遇到过这个问题刻度和数值对着但仪表指针落在了完全相反的位置。后来意识到Canvas 的角度起点是正 x 轴方向即时钟三点钟方向角度按顺时针增加。而数学里常常说的是“逆时针为正、从 x 轴正方向起算”。解决这个问题不靠记忆口诀靠方法画之前固定一个公共函数统一做坐标转换。比如圆心在(cx, cy)的圆形布局我从一开始就封装了一个方法function pointOnCircle(cx, cy, radius, angleRad) { return { x: cx radius * Math.cos(angleRad), y: cy radius * Math.sin(angleRad) }; }只要传入弧度这个函数会按 Canvas 的顺时针逻辑返回坐标。所有刻度、标签、弧线端点都从这里取坐标全项目统一引用基本不会出现上下颠倒的问题。2.2 弧度制不是数学考试的残留是你精确控制圆弧的唯一方式Canvas 的arc()方法接受的是起始角度和结束角度单位是弧度。很多人一开始不习惯习惯性写成 90、180、270 这样的角度值结果画出来的东西完全不是想要的样子。弧度制的好处在于它把“角度大小”和“弧长”的关系直接绑定在一起。一个完整的圆是 2π 弧度半个圆是 π 弧度四分之一是 π/2。在数据可视化里你要把一个百分比映射成 arc 的结束角度最简单直接的方式就是const startAngle -Math.PI / 2; // 从 12 点方向开始 const endAngle startAngle 2 * Math.PI * progress;这里的progress是 0 到 1 之间的小数。比如progress 0.75endAngle 就是起始角加四分之三圈画出来的弧线正好对应 75% 的进度。要换算角度直接用Math.PI / 180const degToRad (deg) deg * Math.PI / 180;我的习惯是所有圆上绘制的逻辑一律使用弧度绝不混用角度与弧度。如果传入的参数是角度就先转换再使用这能省掉很多不必要的 bug。2.3 圆周的“缺口”问题终点永远比起点滞后一点点这是我在做仪表盘时踩过的另一种坑draw 一个完整圆环起始角是 0结束角是 2π结果渲染出来总是有一个细小的缺口。原因很简单arc()的结束角度如果是 2π从数学上它是一个完整圆但 Canvas 在很多浏览器渲染时浮点角度计算的精度无法精确闭合到起点。解决办法也很朴素结束角度不要用 2π而是比 2π 稍微小一点或者稍微大一点保证首尾相接处有重叠。ctx.arc(cx, cy, radius, startAngle, endAngle 0.001);别小看这个 0.001 弧度它在视觉上几乎看不出来但能完美消除那条恼人的缝隙。如果做的是百分比进度环还需要注意progress 为 1 的时候不要用精确的 2π 做结束也加上一点偏移。3. 从 API 到真正意义上的画圆Canvas 基础绘制完整拆解3.1 准备画布三个基础属性画圆之前你得先有一个干净、清晰、适配设备的画布。下面这一段是最基础的准备代码我会逐一解释每一行的必要性和逻辑。canvas idcircleDemo width400 height400/canvasconst canvas document.getElementById(circleDemo); const ctx canvas.getContext(2d); // 设置线条 ctx.strokeStyle #333333; ctx.lineWidth 2;getContext(2d)返回绘图上下文所有绘制操作都在这个上下文上完成。strokeStyle定义描边颜色lineWidth定义线宽。3.2 两种“画圆”形态描边和填充Canvas 里画圆本质上有两种形态描边圆与实心圆。描边圆就是arc()stroke()ctx.beginPath(); ctx.arc(200, 200, 80, 0, Math.PI * 2); ctx.stroke();实心圆就是arc()fill()ctx.beginPath(); ctx.arc(200, 200, 80, 0, Math.PI * 2); ctx.fillStyle #ff6b6b; ctx.fill();很多人一开始不注意beginPath()的必要性。每次绘制前都要调用一次否则上一个路径的残留会和新路径混合产生不可预料的填充阴影和线条连接。3.3 贝塞尔曲线也能画圆可以但不建议arc()是标准方案。但某些情况下比如你需要不规则曲线的平滑过渡、路径动画、或者绘制特殊气泡形状可以用贝塞尔曲线逼近一个圆。标准圆的贝塞尔逼近需要四个四分之一圆弧每个四分之一用相同的控制点ctx.beginPath(); ctx.moveTo(200, 120); // 圆顶部 ctx.bezierCurveTo(245, 120, 280, 155, 280, 200); // 右上部分 ctx.bezierCurveTo(280, 245, 245, 280, 200, 280); // 右下部分 ctx.bezierCurveTo(155, 280, 120, 245, 120, 200); // 左下部分 ctx.bezierCurveTo(120, 155, 155, 120, 200, 120); // 左上部分 ctx.stroke();这种做法在实际项目中很少用于画“标准圆”因为效率和精度都不如arc()。但你要是做气泡图变形的动画这个技巧就很有用了。这里不展开提及是为了让你理解Canvas 里“圆”不是只有一个 API 能实现理解路径本质才更重要。3.4 圆周围的文字标签对齐和位置画完圆之后圆周围要显示数据标签。最合理的位置是圆弧的中心点也就是起止角度的中间点。const midAngle startAngle (endAngle - startAngle) / 2; const labelPos pointOnCircle(cx, cy, radius 24, midAngle); ctx.fillStyle #666666; ctx.font 12px sans-serif; ctx.textAlign center; ctx.textBaseline middle; ctx.fillText(75%, labelPos.x, labelPos.y);标签对齐这里有几个小细节textAlign center让文字水平居中textBaseline middle让文字垂直居中。如果是长文本还需要根据标签位置动态调整textAlign比如在圆心左侧就设为right在右侧就设为left避免文字溢出画布。我在做饼图标签时就发现如果不动态调整对齐方式饼图右侧的小扇区名称会直接溢出画布边缘非常难看。4. 把数据画到圆上从环形进度图到饼图的完整实现4.1 环形进度图的实现思路环形进度图本质上是底环 进度环 端点圆点。底环就是画一个完整的圆环进度环是画一段同心圆弧。示例如下function drawRing(canvasId, progress) { const canvas document.getElementById(canvasId); const ctx canvas.getContext(2d); const w canvas.width; const h canvas.height; const cx w / 2; const cy h / 2; const radius 80; const lineWidth 12; // 清除画布 ctx.clearRect(0, 0, w, h); // 1. 底环 ctx.beginPath(); ctx.arc(cx, cy, radius, 0, Math.PI * 2); ctx.strokeStyle #eef1f5; ctx.lineWidth lineWidth; ctx.stroke(); // 2. 进度环从 12 点方向开始 const startAngle -Math.PI / 2; const endAngle startAngle Math.PI * 2 * progress; ctx.beginPath(); ctx.arc(cx, cy, radius, startAngle, endAngle); ctx.strokeStyle #3b82f6; ctx.lineWidth lineWidth; ctx.lineCap round; ctx.stroke(); // 3. 端点圆点 const dotPos pointOnCircle(cx, cy, radius, endAngle); ctx.beginPath(); ctx.arc(dotPos.x, dotPos.y, lineWidth / 2, 0, Math.PI * 2); ctx.fillStyle #3b82f6; ctx.fill(); }这里的关键设计是把圆的起始角定位在 12 点方向。从日常阅读习惯看进度从顶部顺时针跑符合大多数用户对“进度”的直觉。lineCap round这一行也不能省它让圆弧两端带上圆角视觉上更柔和否则进度环两端是平头看起来很生硬。4.2 环形图到真正饼图的转换切片与颜色饼图的本质是把一个圆切成多个扇形每个扇形占据的角度比例对应数据占比。切分的过程就是不断累加起始角。function drawPie(data, cx, cy, radius) { const ctx document.getElementById(pieDemo).getContext(2d); const total data.reduce((sum, item) sum item.value, 0); let startAngle -Math.PI / 2; data.forEach(item { const sliceAngle (item.value / total) * Math.PI * 2; ctx.beginPath(); ctx.moveTo(cx, cy); ctx.arc(cx, cy, radius, startAngle, startAngle sliceAngle); ctx.closePath(); ctx.fillStyle item.color; ctx.fill(); startAngle sliceAngle; }); }这里有个细节每个扇形都需要moveTo(cx, cy)和closePath()。前者把路径起点移动到圆心避免上一个扇形和当前扇形之间出现多余的连接线后者闭合路径让fill()填充的是一个封闭区域而不是一块圆弧缺口的填充。百分比标签绘制data.forEach(item { const midAngle item.startAngle item.sliceAngle / 2; const labelPos pointOnCircle(cx, cy, radius * 0.65, midAngle); ctx.fillStyle #fff; ctx.font bold 13px sans-serif; ctx.textAlign center; ctx.textBaseline middle; ctx.fillText(item.label %, labelPos.x, labelPos.y); });饼图标签放在半径 65% 的位置是为了让文字落在扇区内部偏中视觉上既不会贴着圆心也不会溢出圆外。4.3 从饼图到南丁格尔玫瑰图的扩展南丁格尔玫瑰图是饼图的一个变体扇区的半径随数值大小变化而角度固定均分。它的视觉冲击力比饼图强很多很适合多类目对比展示。const maxValue Math.max(...data.map(d d.value)); data.forEach((item, index) { const sliceAngle (Math.PI * 2) / data.length; const startAngle -Math.PI / 2 index * sliceAngle; const r (item.value / maxValue) * radius; ctx.beginPath(); ctx.moveTo(cx, cy); ctx.arc(cx, cy, r, startAngle, startAngle sliceAngle); ctx.closePath(); ctx.fillStyle item.color; ctx.fill(); });玫瑰图的细节在于半径映射如果不做归一化最大值对应的扇区半径会超出画布。归一化之后最大值就是半径最大值其他值按比例缩放。还应该考虑扇区之间的空隙一般我会在sliceAngle基础上减去一点间隙例如sliceAngle - 0.02弧度让相邻色块边界清爽、不粘连。5. 动效与优化为什么你做不出别人那样的丝滑圆形动画5.1 requestAnimationFrame 的正确使用方式画静态图只是基础数据可视化几乎都要动。多数人用setInterval做动效但浏览器标签页切到后台时setInterval会被严重降频导致动画卡顿和过度渲染。我推荐直接用requestAnimationFrame。它会把每帧渲染和屏幕刷新率同步实现丝滑的 60 帧动画而且后台自动暂停不会空耗 CPU。let progress 0; let animationId null; function animateRing(targetProgress, duration 800) { const startTime performance.now(); const startValue progress; function frame(now) { const elapsed now - startTime; const t Math.min(elapsed / duration, 1); const eased easeOutCubic(t); progress startValue (targetProgress - startValue) * eased; drawRing(progress); if (t 1) { animationId requestAnimationFrame(frame); } else { animationId null; } } animationId requestAnimationFrame(frame); }这里引入了一个easeOutCubic缓动函数const easeOutCubic t 1 - Math.pow(1 - t, 3);不加缓动的动画进度条是匀速增长的视觉上很机械。加了缓动后开始快、结尾慢观感自然得多。如果你想做弹性的仪表指针效果可以换成easeOutElastic。5.2 动效中的“浮点误差”陷阱动画中频繁更新进度值浮点误差会逐渐累积。比如 progress 反复加 0.01最后可能变成 0.750000000001。这个误差在画 arc 时不会出大问题但在检测进度是否达到 100% 时容易误判。我的习惯是动画结束时直接赋精确值不做循环里还判断 target 是否到达的逻辑。if (t 1) { requestAnimationFrame(frame); } else { progress targetProgress; // 强制对齐精确值 drawRing(progress); }这行代码能避免很多“进度永远差一点点”的诡异 bug。5.3 高分屏模糊问题devicePixelRatio做 Canvas 可视化最常见的抱怨是文字边缘模糊、线条发虚。这不是 Canvas 的 bug而是没有处理设备像素比。方式很简单让 Canvas 的实际像素尺寸等于逻辑尺寸乘以devicePixelRatio再用 CSS 把显示尺寸固定为逻辑尺寸。function setupCanvas(canvas, logicalWidth, logicalHeight) { const dpr window.devicePixelRatio || 1; canvas.width logicalWidth * dpr; canvas.height logicalHeight * dpr; canvas.style.width logicalWidth px; canvas.style.height logicalHeight px; const ctx canvas.getContext(2d); ctx.scale(dpr, dpr); return ctx; }之后所有绘制代码里的坐标都按“逻辑尺寸”来写视觉尺寸和坐标完全统一。在 Retina 屏上和普通屏上圆环都能保持清晰的边缘不再发虚。6. 用数据可视化扩展“画圆”一族的实战编码6.1 仪表盘的实现思路与关键细节仪表盘比环形进度图复杂但底层还是一堆圆弧。核心由一个代表整个量程的背景圆弧和一个代表当前数值的进度弧组成。再加上一个旋转的指针圆点就足够了。function drawGauge(value, min, max, cx, cy, radius) { const ctx document.getElementById(gaugeDemo).getContext(2d); const startAngle 135 * Math.PI / 180; // 左下 135 度 const endAngle 405 * Math.PI / 180; // 到右下 405 度整圈多 90 度 const totalAngle endAngle - startAngle; // 量程背景 ctx.beginPath(); ctx.arc(cx, cy, radius, startAngle, endAngle); ctx.strokeStyle #e3e8ef; ctx.lineWidth 16; ctx.lineCap round; ctx.stroke(); // 数据弧 const ratio (value - min) / (max - min); const drawEnd startAngle totalAngle * ratio; ctx.beginPath(); ctx.arc(cx, cy, radius, startAngle, drawEnd); ctx.strokeStyle #10b981; ctx.lineWidth 16; ctx.lineCap round; ctx.stroke(); // 刻度线 for (let i 0; i 10; i) { const tickAngle startAngle (totalAngle / 10) * i; const outerR radius - 24; const innerR radius - 32; const outerPos pointOnCircle(cx, cy, outerR, tickAngle); const innerPos pointOnCircle(cx, cy, innerR, tickAngle); ctx.beginPath(); ctx.moveTo(innerPos.x, innerPos.y); ctx.lineTo(outerPos.x, outerPos.y); ctx.strokeStyle #93a0b1; ctx.lineWidth 1.5; ctx.stroke(); } }仪表盘的环节里最值得说的是起始角与结束角的选取。我写的是 135 度到 405 度而不是 135 度到 315 度、也不是 0 度到 270 度。原因很简单我需要的是一个从下往上的圆弧路径同时留出下方缺口作为仪表的“底座”区域这样视觉上才像一个仪表盘而不是一个整圆。角度用大于 360 度的方式表达避免了“角度跨过 0 度线需要额外判断”的情况。6.2 圆形雷达图简单版的实现雷达图本质上是把各个维度的数据点按角度布置在同心圆线上然后把点连接成闭合多边形。它的实现比仪表盘更依赖坐标系转换。function drawRadar(canvasId, categories, data) { const ctx document.getElementById(canvasId).getContext(2d); const cx 200, cy 200, radius 140; const n categories.length; // 绘制网格从中心向外画 n 圈多边形 for (let level 1; level 5; level) { const r (radius / 5) * level; ctx.beginPath(); for (let i 0; i n; i) { const angle (Math.PI * 2 / n) * i - Math.PI / 2; const x cx r * Math.cos(angle); const y cy r * Math.sin(angle); if (i 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.closePath(); ctx.strokeStyle #dce4ec; ctx.stroke(); } // 绘制数据多边形 const maxVal Math.max(...data); ctx.beginPath(); for (let i 0; i n; i) { const angle (Math.PI * 2 / n) * i - Math.PI / 2; const r (data[i] / maxVal) * radius; const x cx r * Math.cos(angle); const y cy r * Math.sin(angle); if (i 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.closePath(); ctx.fillStyle rgba(59, 130, 246, 0.25); ctx.strokeStyle #3b82f6; ctx.fill(); ctx.stroke(); }雷达图看起来复杂实际就是把“位置”完全交给了pointOnCircle这个基础函数。只要坐标系转换函数写得足够好从画圆升级到雷达图代码量比想象中少很多。6.3 某些不能直接画圆的场景分层圆环布局有些 Dashboard 会有多层圆环嵌套外环是总量、中环是分类占比、内环是某个指标这种布局如果每层独立画会出现内外层颜色不一致、文字挤压、中心重叠的问题。解决方式不难每层环的半径是独立参数把半径从外层到内层依次递减同时避免让外层半径超出画布范围。还要给最内层留足够的中心区域来放汇总数字。function drawMultiRing(ctx, cx, cy, layers) { layers.forEach(layer { drawRingWithRadius(ctx, cx, cy, layer.radius, layer.lineWidth, layer.progress, layer.color); }); }分层布局最大的难点不在 API而在排版间距的预判断内层环的线宽要略窄内外环之间的间距要足够容纳标签。我的做法是先在代码里用console.log临时输出每个环的坐标范围确认不重叠后再固化。7. 从画圆到可视化平台的实用技巧与代码结构设计7.1 封装一个 drawCircle 库让你不用每次重复造轮子在实际项目中我不会每张图都从头写。最合理的方式是先做一个可复用的基础绘图模块把比例换算、坐标转换、绘制封装好然后在业务代码里调用。const CircleKit { setupCanvas, pointOnCircle, drawRing, drawPie, drawGauge, drawRadar };这样一个模块可以直接被多个报表页面复用。如果团队里有几个人在做不同的报表共同维护这个模块会节省大量重复劳动。更重要的是数学和 Canvas 底层这些对大多数业务没有变化的部分越早抽象越好业务代码只需要关心数据和样式。7.2 调试技巧临时网格与辅助圆画布上出问题时最难排查的就是“圆心在哪里”“半径对不对”。我的调试习惯是画正式图形之前先画一个半透明的辅助网格和圆心点。// 调试辅助 ctx.save(); ctx.globalAlpha 0.2; ctx.strokeStyle #333; for (let i 0; i 10; i) { const x (canvas.width / 10) * i; const y (canvas.height / 10) * i; ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); ctx.stroke(); ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvas.width, y); ctx.stroke(); } ctx.restore();这个辅助网格我一般只在本地开发布前删除。有一次我在画环形图时一直觉得圆心偏移就是靠网格发现 Cairo 连线中一处cx写成了cy本来是眼角一酸的 error网格一眼就看出来。7.3 动画与交互监听窗口变化与数据更新画布可视化一定要考虑自适应。窗口变化时重新获取容器尺寸重新绘制。如果只是简单调整可以用resize事件window.addEventListener(resize, () { const logicalWidth container.clientWidth; const logicalHeight container.clientHeight; const ctx setupCanvas(canvas, logicalWidth, logicalHeight); drawAll(ctx); });自适应还有一个性能问题resize事件触发频率很高一次性重绘所有图表会导致卡顿。我习惯加一个防抖函数debounce只在用户停止调整窗口大小 200ms 后才重绘。let resizeTimer; window.addEventListener(resize, () { clearTimeout(resizeTimer); resizeTimer setTimeout(() { const ctx setupCanvas(canvas, logicalWidth, logicalHeight); drawAll(ctx); }, 200); });8. 踩坑实录排查链路与最终修复这个部分我把真实项目中遇到过的三个最典型的圆相关问题完整还原一遍排查过程而不是直接给答案。对你来说复现这种“排查思路”比背结论更有价值。8.1 坑一环形进度条在 100% 时出现缝隙现象进度画到 100%环却有一个 1px 左右的缺口。排查链路先怀疑是lineCap的问题换成butt试了一下缝隙还在排除。怀疑 Canvas 的 arc 闭合精度于是把结束角改成2π 0.001缝隙消失。但后来又发现progress 是动态数值从 99% 变到 100% 时弧线依然有缝隙。最终定位变到 100% 的时候endAngle startAngle 2π * 1正好等于2π - π/2而这个值接近但不到 2π。圆弧本身结束时没有完全到达起点如果lineCap round两端圆头之间的细小间隙会被视觉放大。修复方案在计算endAngle时如果 progress 等于 1就显式加一个微小偏移 0.001。const endAngle startAngle Math.PI * 2 * progress (progress 1 ? 0.001 : 0);8.2 坑二饼图扇区之间出现白色细线现象饼图相邻扇区之间总有细细的白色线条。排查链路怀疑是 fill 未完全覆盖给每个扇区加了strokeStyle item.color和stroke()但线条更明显。怀疑是抗锯齿问题给 Canvas 加ctx.imageSmoothingEnabled false无效。最后发现是arc()顶点处由于浮点误差与相邻扇区边界不重叠背景色透了出来。修复方案每个扇区在填充前将结束角度扩大 0.001 弧度让边缘微微重叠ctx.arc(cx, cy, radius, startAngle, endAngle 0.001);这就解决了那条白线。原理和环形图缝隙是同一个问题Canvas 绘制连续几何图形时相邻路径之间需要微小的重叠才能保证视觉无缝。8.3 坑三动效执行时浏览器标签页切换动画卡死现象用户切到其他标签页再回来动画停在半路不会继续。排查链路一开始怀疑是setInterval被降频换成requestAnimationFrame后有所改善。但切换到后台再回来动画还是停在半途。原因是requestAnimationFrame在后台被暂停回来时progress还是暂停时的值而新的 requestAnimationFrame 从头开始不会从暂停点继续。修复方案用progress持久化存储当前值每次动画开始都以progress作为起始值而不是默认从 0 开始。同时加入document.visibilitychange事件在标签页重新可见时重新启动剩余动画。document.addEventListener(visibilitychange, () { if (!document.hidden) { animateToTarget(currentTarget); } });这套修复完成后动画在切页与回页时都能恢复正常体验平顺很多。9. 一些真正管用的实践经验总结写到这里我关于“js 画圆”的经验基本都讲完了。最后说几个我写代码时真正管用的习惯。第一所有逻辑按弧度写不写角度。这句话我强调了多次因为它真的能省掉百分之八十的坐标系烦恼。传参进来的角度第一时间转成弧度之后所有运算统一使用弧度。第二所有圆心周围的坐标统一用pointOnCircle生成。不管是扇区端点、标签位置、刻度线、还是动画的圆点都从同一个函数取坐标。这个函数不复杂但它保证了视觉元素的位置一致性也让代码变得好读。第三绘制前先清空画布绘制后适当关闭路径。beginPath()不是可选的它在多图场景下就是画布状态的“重置键”。不清空路径填充阴影会纠缠在一起让你排查问题排查到怀疑人生。第四保存和恢复上下文状态。如果某个绘制用到了临时 lineWidth、填充色、阴影用ctx.save()和ctx.restore()包起来避免污染后续图形。这个在画分层圆环时尤其重要。第五别一上来就找第三方图表库。如果只是画一两张环形图或仪表盘原生 Canvas 写一个自用函数比引入一个几十 KB 的库更轻、更可控。你也会在这个过程中真正掌握数据点坐标如何映射、比例如何归一化、动画如何调度。这些能力在以后阅读或改造任何图表库时都是通用的。从一次简单的“画圆”需求出发能走到数据可视化的构建逻辑这就是 Canvas 的迷人之处API 基础但应用无边。希望这篇内容能帮你在自己的项目里少踩几个我踩过的坑。如果你在工作中也遇到过和我类似的问题或者用 Canvas 画出了更有意思的圆形可视化欢迎在评论区分享我会认真看。
1. 这事得从一次糟糕的柱状图改版说起大概是一年多前我在给内部某个数据报表平台做视觉升级设计师给了一张特别漂亮的环形进度图。当时我第一反应是这不就 Canvas 画个圆弧的事吗结果真正动手才发现坑比想象中多得多——设备像素比导致的锯齿、圆弧端点对不齐、动画进度比例算错、数据标签忽上忽下……我意识到“在 Canvas 上画圆”这件事看似基础其实是很多人从“会写代码”到“真正搞定前端可视化”之间的一道坎。圆是最简单的几何图形但围绕它展开的坐标映射、高精度渲染、动效调度、设备适配全都是数据可视化项目里绕不开的底层能力。这篇内容就围绕“js 画圆”展开。我会从 Canvas 基础坐标系讲起到弧度制、圆形数据映射、环形图、饼图、仪表盘、自适应与动效再到一套可以复用的数据可视化思路。最后会有几个我在真实项目中踩过的坑和排查链路希望帮你少走弯路。适合人群刚接触 Canvas 的前端开发者准备用原生 JS 做数据可视化的朋友以及那些已经用了可视化库、但想知道底层渲染原理的人。2. 画圆之前必须先搞懂的三个底层问题2.1 坐标系不是数学坐标系y 轴是反的很多人第一笔圆弧画出来是歪的根本原因不是 API 用错而是没有把“Canvas 坐标系”和“数学坐标系”区分清楚。Canvas 的坐标系原点在左上角x 轴向右为正y 轴向下为正。数学课本里的坐标系y 轴向上为正圆心一般在图形中心。两者一组合你按数学直觉去计算角度位置画出来的东西就会上下颠倒、角度错位。我在画仪表盘指针时遇到过这个问题刻度和数值对着但仪表指针落在了完全相反的位置。后来意识到Canvas 的角度起点是正 x 轴方向即时钟三点钟方向角度按顺时针增加。而数学里常常说的是“逆时针为正、从 x 轴正方向起算”。解决这个问题不靠记忆口诀靠方法画之前固定一个公共函数统一做坐标转换。比如圆心在(cx, cy)的圆形布局我从一开始就封装了一个方法function pointOnCircle(cx, cy, radius, angleRad) { return { x: cx radius * Math.cos(angleRad), y: cy radius * Math.sin(angleRad) }; }只要传入弧度这个函数会按 Canvas 的顺时针逻辑返回坐标。所有刻度、标签、弧线端点都从这里取坐标全项目统一引用基本不会出现上下颠倒的问题。2.2 弧度制不是数学考试的残留是你精确控制圆弧的唯一方式Canvas 的arc()方法接受的是起始角度和结束角度单位是弧度。很多人一开始不习惯习惯性写成 90、180、270 这样的角度值结果画出来的东西完全不是想要的样子。弧度制的好处在于它把“角度大小”和“弧长”的关系直接绑定在一起。一个完整的圆是 2π 弧度半个圆是 π 弧度四分之一是 π/2。在数据可视化里你要把一个百分比映射成 arc 的结束角度最简单直接的方式就是const startAngle -Math.PI / 2; // 从 12 点方向开始 const endAngle startAngle 2 * Math.PI * progress;这里的progress是 0 到 1 之间的小数。比如progress 0.75endAngle 就是起始角加四分之三圈画出来的弧线正好对应 75% 的进度。要换算角度直接用Math.PI / 180const degToRad (deg) deg * Math.PI / 180;我的习惯是所有圆上绘制的逻辑一律使用弧度绝不混用角度与弧度。如果传入的参数是角度就先转换再使用这能省掉很多不必要的 bug。2.3 圆周的“缺口”问题终点永远比起点滞后一点点这是我在做仪表盘时踩过的另一种坑draw 一个完整圆环起始角是 0结束角是 2π结果渲染出来总是有一个细小的缺口。原因很简单arc()的结束角度如果是 2π从数学上它是一个完整圆但 Canvas 在很多浏览器渲染时浮点角度计算的精度无法精确闭合到起点。解决办法也很朴素结束角度不要用 2π而是比 2π 稍微小一点或者稍微大一点保证首尾相接处有重叠。ctx.arc(cx, cy, radius, startAngle, endAngle 0.001);别小看这个 0.001 弧度它在视觉上几乎看不出来但能完美消除那条恼人的缝隙。如果做的是百分比进度环还需要注意progress 为 1 的时候不要用精确的 2π 做结束也加上一点偏移。3. 从 API 到真正意义上的画圆Canvas 基础绘制完整拆解3.1 准备画布三个基础属性画圆之前你得先有一个干净、清晰、适配设备的画布。下面这一段是最基础的准备代码我会逐一解释每一行的必要性和逻辑。canvas idcircleDemo width400 height400/canvasconst canvas document.getElementById(circleDemo); const ctx canvas.getContext(2d); // 设置线条 ctx.strokeStyle #333333; ctx.lineWidth 2;getContext(2d)返回绘图上下文所有绘制操作都在这个上下文上完成。strokeStyle定义描边颜色lineWidth定义线宽。3.2 两种“画圆”形态描边和填充Canvas 里画圆本质上有两种形态描边圆与实心圆。描边圆就是arc()stroke()ctx.beginPath(); ctx.arc(200, 200, 80, 0, Math.PI * 2); ctx.stroke();实心圆就是arc()fill()ctx.beginPath(); ctx.arc(200, 200, 80, 0, Math.PI * 2); ctx.fillStyle #ff6b6b; ctx.fill();很多人一开始不注意beginPath()的必要性。每次绘制前都要调用一次否则上一个路径的残留会和新路径混合产生不可预料的填充阴影和线条连接。3.3 贝塞尔曲线也能画圆可以但不建议arc()是标准方案。但某些情况下比如你需要不规则曲线的平滑过渡、路径动画、或者绘制特殊气泡形状可以用贝塞尔曲线逼近一个圆。标准圆的贝塞尔逼近需要四个四分之一圆弧每个四分之一用相同的控制点ctx.beginPath(); ctx.moveTo(200, 120); // 圆顶部 ctx.bezierCurveTo(245, 120, 280, 155, 280, 200); // 右上部分 ctx.bezierCurveTo(280, 245, 245, 280, 200, 280); // 右下部分 ctx.bezierCurveTo(155, 280, 120, 245, 120, 200); // 左下部分 ctx.bezierCurveTo(120, 155, 155, 120, 200, 120); // 左上部分 ctx.stroke();这种做法在实际项目中很少用于画“标准圆”因为效率和精度都不如arc()。但你要是做气泡图变形的动画这个技巧就很有用了。这里不展开提及是为了让你理解Canvas 里“圆”不是只有一个 API 能实现理解路径本质才更重要。3.4 圆周围的文字标签对齐和位置画完圆之后圆周围要显示数据标签。最合理的位置是圆弧的中心点也就是起止角度的中间点。const midAngle startAngle (endAngle - startAngle) / 2; const labelPos pointOnCircle(cx, cy, radius 24, midAngle); ctx.fillStyle #666666; ctx.font 12px sans-serif; ctx.textAlign center; ctx.textBaseline middle; ctx.fillText(75%, labelPos.x, labelPos.y);标签对齐这里有几个小细节textAlign center让文字水平居中textBaseline middle让文字垂直居中。如果是长文本还需要根据标签位置动态调整textAlign比如在圆心左侧就设为right在右侧就设为left避免文字溢出画布。我在做饼图标签时就发现如果不动态调整对齐方式饼图右侧的小扇区名称会直接溢出画布边缘非常难看。4. 把数据画到圆上从环形进度图到饼图的完整实现4.1 环形进度图的实现思路环形进度图本质上是底环 进度环 端点圆点。底环就是画一个完整的圆环进度环是画一段同心圆弧。示例如下function drawRing(canvasId, progress) { const canvas document.getElementById(canvasId); const ctx canvas.getContext(2d); const w canvas.width; const h canvas.height; const cx w / 2; const cy h / 2; const radius 80; const lineWidth 12; // 清除画布 ctx.clearRect(0, 0, w, h); // 1. 底环 ctx.beginPath(); ctx.arc(cx, cy, radius, 0, Math.PI * 2); ctx.strokeStyle #eef1f5; ctx.lineWidth lineWidth; ctx.stroke(); // 2. 进度环从 12 点方向开始 const startAngle -Math.PI / 2; const endAngle startAngle Math.PI * 2 * progress; ctx.beginPath(); ctx.arc(cx, cy, radius, startAngle, endAngle); ctx.strokeStyle #3b82f6; ctx.lineWidth lineWidth; ctx.lineCap round; ctx.stroke(); // 3. 端点圆点 const dotPos pointOnCircle(cx, cy, radius, endAngle); ctx.beginPath(); ctx.arc(dotPos.x, dotPos.y, lineWidth / 2, 0, Math.PI * 2); ctx.fillStyle #3b82f6; ctx.fill(); }这里的关键设计是把圆的起始角定位在 12 点方向。从日常阅读习惯看进度从顶部顺时针跑符合大多数用户对“进度”的直觉。lineCap round这一行也不能省它让圆弧两端带上圆角视觉上更柔和否则进度环两端是平头看起来很生硬。4.2 环形图到真正饼图的转换切片与颜色饼图的本质是把一个圆切成多个扇形每个扇形占据的角度比例对应数据占比。切分的过程就是不断累加起始角。function drawPie(data, cx, cy, radius) { const ctx document.getElementById(pieDemo).getContext(2d); const total data.reduce((sum, item) sum item.value, 0); let startAngle -Math.PI / 2; data.forEach(item { const sliceAngle (item.value / total) * Math.PI * 2; ctx.beginPath(); ctx.moveTo(cx, cy); ctx.arc(cx, cy, radius, startAngle, startAngle sliceAngle); ctx.closePath(); ctx.fillStyle item.color; ctx.fill(); startAngle sliceAngle; }); }这里有个细节每个扇形都需要moveTo(cx, cy)和closePath()。前者把路径起点移动到圆心避免上一个扇形和当前扇形之间出现多余的连接线后者闭合路径让fill()填充的是一个封闭区域而不是一块圆弧缺口的填充。百分比标签绘制data.forEach(item { const midAngle item.startAngle item.sliceAngle / 2; const labelPos pointOnCircle(cx, cy, radius * 0.65, midAngle); ctx.fillStyle #fff; ctx.font bold 13px sans-serif; ctx.textAlign center; ctx.textBaseline middle; ctx.fillText(item.label %, labelPos.x, labelPos.y); });饼图标签放在半径 65% 的位置是为了让文字落在扇区内部偏中视觉上既不会贴着圆心也不会溢出圆外。4.3 从饼图到南丁格尔玫瑰图的扩展南丁格尔玫瑰图是饼图的一个变体扇区的半径随数值大小变化而角度固定均分。它的视觉冲击力比饼图强很多很适合多类目对比展示。const maxValue Math.max(...data.map(d d.value)); data.forEach((item, index) { const sliceAngle (Math.PI * 2) / data.length; const startAngle -Math.PI / 2 index * sliceAngle; const r (item.value / maxValue) * radius; ctx.beginPath(); ctx.moveTo(cx, cy); ctx.arc(cx, cy, r, startAngle, startAngle sliceAngle); ctx.closePath(); ctx.fillStyle item.color; ctx.fill(); });玫瑰图的细节在于半径映射如果不做归一化最大值对应的扇区半径会超出画布。归一化之后最大值就是半径最大值其他值按比例缩放。还应该考虑扇区之间的空隙一般我会在sliceAngle基础上减去一点间隙例如sliceAngle - 0.02弧度让相邻色块边界清爽、不粘连。5. 动效与优化为什么你做不出别人那样的丝滑圆形动画5.1 requestAnimationFrame 的正确使用方式画静态图只是基础数据可视化几乎都要动。多数人用setInterval做动效但浏览器标签页切到后台时setInterval会被严重降频导致动画卡顿和过度渲染。我推荐直接用requestAnimationFrame。它会把每帧渲染和屏幕刷新率同步实现丝滑的 60 帧动画而且后台自动暂停不会空耗 CPU。let progress 0; let animationId null; function animateRing(targetProgress, duration 800) { const startTime performance.now(); const startValue progress; function frame(now) { const elapsed now - startTime; const t Math.min(elapsed / duration, 1); const eased easeOutCubic(t); progress startValue (targetProgress - startValue) * eased; drawRing(progress); if (t 1) { animationId requestAnimationFrame(frame); } else { animationId null; } } animationId requestAnimationFrame(frame); }这里引入了一个easeOutCubic缓动函数const easeOutCubic t 1 - Math.pow(1 - t, 3);不加缓动的动画进度条是匀速增长的视觉上很机械。加了缓动后开始快、结尾慢观感自然得多。如果你想做弹性的仪表指针效果可以换成easeOutElastic。5.2 动效中的“浮点误差”陷阱动画中频繁更新进度值浮点误差会逐渐累积。比如 progress 反复加 0.01最后可能变成 0.750000000001。这个误差在画 arc 时不会出大问题但在检测进度是否达到 100% 时容易误判。我的习惯是动画结束时直接赋精确值不做循环里还判断 target 是否到达的逻辑。if (t 1) { requestAnimationFrame(frame); } else { progress targetProgress; // 强制对齐精确值 drawRing(progress); }这行代码能避免很多“进度永远差一点点”的诡异 bug。5.3 高分屏模糊问题devicePixelRatio做 Canvas 可视化最常见的抱怨是文字边缘模糊、线条发虚。这不是 Canvas 的 bug而是没有处理设备像素比。方式很简单让 Canvas 的实际像素尺寸等于逻辑尺寸乘以devicePixelRatio再用 CSS 把显示尺寸固定为逻辑尺寸。function setupCanvas(canvas, logicalWidth, logicalHeight) { const dpr window.devicePixelRatio || 1; canvas.width logicalWidth * dpr; canvas.height logicalHeight * dpr; canvas.style.width logicalWidth px; canvas.style.height logicalHeight px; const ctx canvas.getContext(2d); ctx.scale(dpr, dpr); return ctx; }之后所有绘制代码里的坐标都按“逻辑尺寸”来写视觉尺寸和坐标完全统一。在 Retina 屏上和普通屏上圆环都能保持清晰的边缘不再发虚。6. 用数据可视化扩展“画圆”一族的实战编码6.1 仪表盘的实现思路与关键细节仪表盘比环形进度图复杂但底层还是一堆圆弧。核心由一个代表整个量程的背景圆弧和一个代表当前数值的进度弧组成。再加上一个旋转的指针圆点就足够了。function drawGauge(value, min, max, cx, cy, radius) { const ctx document.getElementById(gaugeDemo).getContext(2d); const startAngle 135 * Math.PI / 180; // 左下 135 度 const endAngle 405 * Math.PI / 180; // 到右下 405 度整圈多 90 度 const totalAngle endAngle - startAngle; // 量程背景 ctx.beginPath(); ctx.arc(cx, cy, radius, startAngle, endAngle); ctx.strokeStyle #e3e8ef; ctx.lineWidth 16; ctx.lineCap round; ctx.stroke(); // 数据弧 const ratio (value - min) / (max - min); const drawEnd startAngle totalAngle * ratio; ctx.beginPath(); ctx.arc(cx, cy, radius, startAngle, drawEnd); ctx.strokeStyle #10b981; ctx.lineWidth 16; ctx.lineCap round; ctx.stroke(); // 刻度线 for (let i 0; i 10; i) { const tickAngle startAngle (totalAngle / 10) * i; const outerR radius - 24; const innerR radius - 32; const outerPos pointOnCircle(cx, cy, outerR, tickAngle); const innerPos pointOnCircle(cx, cy, innerR, tickAngle); ctx.beginPath(); ctx.moveTo(innerPos.x, innerPos.y); ctx.lineTo(outerPos.x, outerPos.y); ctx.strokeStyle #93a0b1; ctx.lineWidth 1.5; ctx.stroke(); } }仪表盘的环节里最值得说的是起始角与结束角的选取。我写的是 135 度到 405 度而不是 135 度到 315 度、也不是 0 度到 270 度。原因很简单我需要的是一个从下往上的圆弧路径同时留出下方缺口作为仪表的“底座”区域这样视觉上才像一个仪表盘而不是一个整圆。角度用大于 360 度的方式表达避免了“角度跨过 0 度线需要额外判断”的情况。6.2 圆形雷达图简单版的实现雷达图本质上是把各个维度的数据点按角度布置在同心圆线上然后把点连接成闭合多边形。它的实现比仪表盘更依赖坐标系转换。function drawRadar(canvasId, categories, data) { const ctx document.getElementById(canvasId).getContext(2d); const cx 200, cy 200, radius 140; const n categories.length; // 绘制网格从中心向外画 n 圈多边形 for (let level 1; level 5; level) { const r (radius / 5) * level; ctx.beginPath(); for (let i 0; i n; i) { const angle (Math.PI * 2 / n) * i - Math.PI / 2; const x cx r * Math.cos(angle); const y cy r * Math.sin(angle); if (i 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.closePath(); ctx.strokeStyle #dce4ec; ctx.stroke(); } // 绘制数据多边形 const maxVal Math.max(...data); ctx.beginPath(); for (let i 0; i n; i) { const angle (Math.PI * 2 / n) * i - Math.PI / 2; const r (data[i] / maxVal) * radius; const x cx r * Math.cos(angle); const y cy r * Math.sin(angle); if (i 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.closePath(); ctx.fillStyle rgba(59, 130, 246, 0.25); ctx.strokeStyle #3b82f6; ctx.fill(); ctx.stroke(); }雷达图看起来复杂实际就是把“位置”完全交给了pointOnCircle这个基础函数。只要坐标系转换函数写得足够好从画圆升级到雷达图代码量比想象中少很多。6.3 某些不能直接画圆的场景分层圆环布局有些 Dashboard 会有多层圆环嵌套外环是总量、中环是分类占比、内环是某个指标这种布局如果每层独立画会出现内外层颜色不一致、文字挤压、中心重叠的问题。解决方式不难每层环的半径是独立参数把半径从外层到内层依次递减同时避免让外层半径超出画布范围。还要给最内层留足够的中心区域来放汇总数字。function drawMultiRing(ctx, cx, cy, layers) { layers.forEach(layer { drawRingWithRadius(ctx, cx, cy, layer.radius, layer.lineWidth, layer.progress, layer.color); }); }分层布局最大的难点不在 API而在排版间距的预判断内层环的线宽要略窄内外环之间的间距要足够容纳标签。我的做法是先在代码里用console.log临时输出每个环的坐标范围确认不重叠后再固化。7. 从画圆到可视化平台的实用技巧与代码结构设计7.1 封装一个 drawCircle 库让你不用每次重复造轮子在实际项目中我不会每张图都从头写。最合理的方式是先做一个可复用的基础绘图模块把比例换算、坐标转换、绘制封装好然后在业务代码里调用。const CircleKit { setupCanvas, pointOnCircle, drawRing, drawPie, drawGauge, drawRadar };这样一个模块可以直接被多个报表页面复用。如果团队里有几个人在做不同的报表共同维护这个模块会节省大量重复劳动。更重要的是数学和 Canvas 底层这些对大多数业务没有变化的部分越早抽象越好业务代码只需要关心数据和样式。7.2 调试技巧临时网格与辅助圆画布上出问题时最难排查的就是“圆心在哪里”“半径对不对”。我的调试习惯是画正式图形之前先画一个半透明的辅助网格和圆心点。// 调试辅助 ctx.save(); ctx.globalAlpha 0.2; ctx.strokeStyle #333; for (let i 0; i 10; i) { const x (canvas.width / 10) * i; const y (canvas.height / 10) * i; ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); ctx.stroke(); ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvas.width, y); ctx.stroke(); } ctx.restore();这个辅助网格我一般只在本地开发布前删除。有一次我在画环形图时一直觉得圆心偏移就是靠网格发现 Cairo 连线中一处cx写成了cy本来是眼角一酸的 error网格一眼就看出来。7.3 动画与交互监听窗口变化与数据更新画布可视化一定要考虑自适应。窗口变化时重新获取容器尺寸重新绘制。如果只是简单调整可以用resize事件window.addEventListener(resize, () { const logicalWidth container.clientWidth; const logicalHeight container.clientHeight; const ctx setupCanvas(canvas, logicalWidth, logicalHeight); drawAll(ctx); });自适应还有一个性能问题resize事件触发频率很高一次性重绘所有图表会导致卡顿。我习惯加一个防抖函数debounce只在用户停止调整窗口大小 200ms 后才重绘。let resizeTimer; window.addEventListener(resize, () { clearTimeout(resizeTimer); resizeTimer setTimeout(() { const ctx setupCanvas(canvas, logicalWidth, logicalHeight); drawAll(ctx); }, 200); });8. 踩坑实录排查链路与最终修复这个部分我把真实项目中遇到过的三个最典型的圆相关问题完整还原一遍排查过程而不是直接给答案。对你来说复现这种“排查思路”比背结论更有价值。8.1 坑一环形进度条在 100% 时出现缝隙现象进度画到 100%环却有一个 1px 左右的缺口。排查链路先怀疑是lineCap的问题换成butt试了一下缝隙还在排除。怀疑 Canvas 的 arc 闭合精度于是把结束角改成2π 0.001缝隙消失。但后来又发现progress 是动态数值从 99% 变到 100% 时弧线依然有缝隙。最终定位变到 100% 的时候endAngle startAngle 2π * 1正好等于2π - π/2而这个值接近但不到 2π。圆弧本身结束时没有完全到达起点如果lineCap round两端圆头之间的细小间隙会被视觉放大。修复方案在计算endAngle时如果 progress 等于 1就显式加一个微小偏移 0.001。const endAngle startAngle Math.PI * 2 * progress (progress 1 ? 0.001 : 0);8.2 坑二饼图扇区之间出现白色细线现象饼图相邻扇区之间总有细细的白色线条。排查链路怀疑是 fill 未完全覆盖给每个扇区加了strokeStyle item.color和stroke()但线条更明显。怀疑是抗锯齿问题给 Canvas 加ctx.imageSmoothingEnabled false无效。最后发现是arc()顶点处由于浮点误差与相邻扇区边界不重叠背景色透了出来。修复方案每个扇区在填充前将结束角度扩大 0.001 弧度让边缘微微重叠ctx.arc(cx, cy, radius, startAngle, endAngle 0.001);这就解决了那条白线。原理和环形图缝隙是同一个问题Canvas 绘制连续几何图形时相邻路径之间需要微小的重叠才能保证视觉无缝。8.3 坑三动效执行时浏览器标签页切换动画卡死现象用户切到其他标签页再回来动画停在半路不会继续。排查链路一开始怀疑是setInterval被降频换成requestAnimationFrame后有所改善。但切换到后台再回来动画还是停在半途。原因是requestAnimationFrame在后台被暂停回来时progress还是暂停时的值而新的 requestAnimationFrame 从头开始不会从暂停点继续。修复方案用progress持久化存储当前值每次动画开始都以progress作为起始值而不是默认从 0 开始。同时加入document.visibilitychange事件在标签页重新可见时重新启动剩余动画。document.addEventListener(visibilitychange, () { if (!document.hidden) { animateToTarget(currentTarget); } });这套修复完成后动画在切页与回页时都能恢复正常体验平顺很多。9. 一些真正管用的实践经验总结写到这里我关于“js 画圆”的经验基本都讲完了。最后说几个我写代码时真正管用的习惯。第一所有逻辑按弧度写不写角度。这句话我强调了多次因为它真的能省掉百分之八十的坐标系烦恼。传参进来的角度第一时间转成弧度之后所有运算统一使用弧度。第二所有圆心周围的坐标统一用pointOnCircle生成。不管是扇区端点、标签位置、刻度线、还是动画的圆点都从同一个函数取坐标。这个函数不复杂但它保证了视觉元素的位置一致性也让代码变得好读。第三绘制前先清空画布绘制后适当关闭路径。beginPath()不是可选的它在多图场景下就是画布状态的“重置键”。不清空路径填充阴影会纠缠在一起让你排查问题排查到怀疑人生。第四保存和恢复上下文状态。如果某个绘制用到了临时 lineWidth、填充色、阴影用ctx.save()和ctx.restore()包起来避免污染后续图形。这个在画分层圆环时尤其重要。第五别一上来就找第三方图表库。如果只是画一两张环形图或仪表盘原生 Canvas 写一个自用函数比引入一个几十 KB 的库更轻、更可控。你也会在这个过程中真正掌握数据点坐标如何映射、比例如何归一化、动画如何调度。这些能力在以后阅读或改造任何图表库时都是通用的。从一次简单的“画圆”需求出发能走到数据可视化的构建逻辑这就是 Canvas 的迷人之处API 基础但应用无边。希望这篇内容能帮你在自己的项目里少踩几个我踩过的坑。如果你在工作中也遇到过和我类似的问题或者用 Canvas 画出了更有意思的圆形可视化欢迎在评论区分享我会认真看。
