图表库为何偏爱 Canvas 而非 SVG？

在前端开发中，图表库的选择是面试中常被问及的问题。尤其是在涉及到高性能图形渲染时，Canvas 和 SVG 之间的权衡更是核心考点。今天，我们就来深入探讨一下，为什么现在主流的图表库（如 ECharts、AntV G2 等）大多采用 Canvas 方案，而不是 SVG。

💡 SVG 的 GPU 加速特点

SVG (Scalable Vector Graphics) 是一种基于 XML 的矢量图形格式，它在浏览器中渲染时，也可以利用 GPU 进行加速。然而，SVG 的 GPU 加速存在一些局限性。

⚠️ 有限的自动加速

SVG 的 GPU 加速并非总是由开发者控制，而是很大程度上依赖于浏览器的“心情”。

• 浏览器说了算： 对于一些简单的 SVG 图形，浏览器可能觉得“小意思”，直接用 CPU 渲染就足够了，根本不会启用 GPU 加速。这就像你让一个经验丰富的厨师切菜，如果只是切几片黄瓜，他可能直接用手切，而不是去启动一台全自动切菜机。
• 复杂场景才可能触发： 只有当 SVG 场景变得非常复杂，比如包含成千上万个图形元素、复杂的变换（旋转、缩放、倾斜）或者动画效果时，浏览器才有可能“大发慈悲”地启用 GPU 加速。但即便如此，这种加速的触发机制也并不完全可控，它取决于浏览器的内部实现和判断。你无法像控制电灯开关一样，明确地告诉浏览器：“嘿，给我用 GPU 加速！”

🔄 依赖浏览器优化

SVG 的 GPU 加速效果，就像“看人下菜碟”，不同的浏览器有不同的表现。

• “因人而异”的性能： SVG 的 GPU 加速在很大程度上依赖于浏览器的优化策略。这意味着，同一个 SVG 图形在 Chrome、Firefox 或 Safari 等不同浏览器上的性能表现可能会大相径庭。这就像你请了不同的装修队来装修房子，即使是同样的图纸，最终的效果和效率也可能不一样。
• 特性优化不一致： 某些现代浏览器可能会对特定的 SVG 特性（比如滤镜效果、渐变等）进行专门优化，并启用 GPU 加速。但其他浏览器可能就没有这样的“特殊待遇”。这就像有些手机支持某个游戏的专属优化模式，而其他手机则没有。

🔧 Canvas 的 GPU 加速特点

Canvas 是 HTML5 提供的一个绘图 API，它允许开发者通过 JavaScript 直接在网页上绘制图形。与 SVG 不同，Canvas 在 GPU 加速方面拥有更明确的控制权和更高的性能潜力。。

✨ 更明确的控制

Canvas 就像一个“听话”的画板，你可以精确地控制它如何利用 GPU。

• “指哪打哪”的加速： 在 Canvas 中，开发者可以通过一些特定的技术手段，比如结合 WebGL（基于 OpenGL ES 的 JavaScript API），明确地请求 GPU 加速。WebGL 允许你直接操作 GPU 的底层能力，进行高性能的 3D 图形渲染。这就像你拥有了一台专业的摄影机，可以精确地调整光圈、快门、ISO，而不是只能使用傻瓜模式。
• 2D 图形也受益： 即使是 2D 图形，一些浏览器也提供了对 Canvas 的硬件加速支持。开发者可以通过特定的浏览器设置或使用图形库来启用它。这意味着，你可以更直接地控制是否使用 GPU 加速，以及如何优化图形渲染以充分利用 GPU 的性能。这就像你不仅能控制专业摄影机，还能控制普通相机的各种参数，让它拍出更好的照片。

🚀 高性能图形渲染

Canvas 结合 GPU 加速，能够实现非常惊人的图形渲染性能，尤其是在处理复杂场景时。。

• “飞沙走石”般的渲染速度： Canvas 结合 GPU 加速，可以实现非常高性能的图形渲染，特别适用于那些需要大量图形元素、复杂动画或实时交互的场景，比如大型游戏、复杂的数据可视化和流畅的动画效果。GPU 的并行处理能力，就像一支训练有素的军队，可以同时处理大量的图形任务，快速绘制出海量的图形并进行复杂的图形变换。这就像一个大型工厂的流水线，每个环节都高效运转，大大提升了生产效率。
• 数据可视化利器： 在数据可视化领域，Canvas 和 WebGL 的组合更是大放异彩。它们可以实现大规模数据的实时渲染和交互，为用户提供极其流畅的体验。想象一下，你在一个股票交易平台上，实时查看成千上万只股票的K线图，或者在一个大数据分析工具中，拖拽、缩放、筛选海量数据点，而这一切都能够丝滑流畅地进行，这背后很可能就是 Canvas 和 WebGL 的功劳。

⚖️ 总结与选择

总而言之，Canvas 在利用 GPU 硬件加速方面通常具有更明确的控制和更高的性能潜力，而 SVG 的 GPU 加速则更多地依赖于浏览器的自动优化，且加速的范围和效果相对有限。

在实际应用中，选择使用 SVG 还是 Canvas，并考虑 GPU 加速，需要根据具体的应用场景、性能需求和开发技术栈来综合决定。

• SVG 适用场景： 如果你的图形是静态的、数量不多、不需要频繁交互或复杂动画，并且对可访问性、SEO 有较高要求，那么 SVG 可能是更好的选择。它基于 DOM，易于操作和样式化。
• Canvas 适用场景： 如果你需要处理大量图形、实现复杂动画、游戏开发、大规模数据可视化，或者对性能有极高要求，那么 Canvas 结合 GPU 加速将是你的不二之选。它提供了像素级的控制，性能更优。

希望通过这篇文章，你对 Canvas 和 SVG 在 GPU 加速方面的特点有了更深入的理解，在前端面试中也能游刃有余地回答相关问题！

点赞 + 关注 + 收藏 = 学会了

cylinder() 是 p5.js 中用于绘制3D 圆柱体的函数。圆柱体由顶部、底部两个圆形和侧面组成，所有表面由三角形拼接而成（这是 3D 绘图的常见方式）。

注意：cylinder() 只能在「WebGL 模式」下使用（WebGL 是浏览器的 3D 绘图技术），普通 2D 模式下无法生效。

基础语法

cylinder() 的参数非常灵活，所有参数都是可选的，按顺序传入即可：

cylinder([radius], [height], [detailX], [detailY], [bottomCap], [topCap])

• radius（半径）
  • 作用：设置圆柱体底部 / 顶部圆形的半径。
  • 类型：数字（比如 20、50）。
  • 默认值：50（不填的话，半径就是 50）。
• height（高度）
  • 作用：设置圆柱体上下底之间的距离（沿 y 轴方向）。
  • 类型：数字。
  • 默认值：等于 radius（不填的话，高度和半径一样）。
• detailX（水平细分）
  • 作用：控制顶部和底部圆形的「边数」。边数越少，形状越像多边形（比如 4 边就像盒子）；边数越多，越接近圆形。
  • 类型：整数（比如 4、24）。
  • 默认值：24（默认看起来比较圆）。
• detailY（垂直细分）
  • 作用：控制圆柱体侧面沿高度方向的「三角形细分数量」。数值越大，侧面越平滑。
  • 类型：整数（比如 1、3）。
  • 默认值：1（默认侧面较简洁）。
• bottomCap（底部开关）
  • 作用：控制是否绘制底部圆形。
  • 类型：布尔值（true 绘制，false 不绘制）。
  • 默认值：true（默认绘制底部）。
• topCap（顶部开关）
  • 作用：控制是否绘制顶部圆形。
  • 类型：布尔值（true 绘制，false 不绘制）。
  • 默认值：true（默认绘制顶部）。

动手试试

默认圆柱体

一个半径 50、高度 50、边缘平滑（detailX=24）、带上下底的圆柱体。

function setup() {
  createCanvas(200, 200, WEBGL); // 开启 WebGL 模式（必须）
  describe('灰色背景上的白色圆柱体');
}

function draw() {
  background(200); // 灰色背景
  orbitControl(); // 允许鼠标拖动旋转视角（3D 必备）
  cylinder(); // 不填参数，用默认值
}

createCanvas 第三个参数 WEBGL 是 3D 绘图的开关；orbitControl() 让你能拖动鼠标 360° 查看圆柱体。

指定半径

半径 30，高度默认等于半径（也是 30）的圆柱体。

// 其他代码和示例 1 相同，仅修改 cylinder() 部分
cylinder(30); // 只传 radius=30

只传一个参数时，默认是 radius，height 会自动等于它。

指定半径和高度

半径 30、高度 50 的圆柱体（更 “瘦长”）。

cylinder(30, 50); // radius=30，height=50

调整水平细分（detailX）

顶部和底部只有 5 条边，看起来像一个 “五角柱”（接近盒子）。

detailX 越小，形状越 “棱角分明”；越大越接近圆形。

cylinder(30, 50, 6); // detailX=6

调整垂直细分（detailY）

侧面沿高度方向分成 2 段，比默认（detailY=1）更平滑。

cylinder(30, 50, 24, 2); // detailX=24（默认圆），detailY=2

隐藏底部

cylinder(30, 50, 24, 1, false); // bottomCap=false

隐藏顶部和底部

只剩侧面，像一个 “圆筒”（比如水管）。

cylinder(30, 50, 24, 1, false, false); // 两个都设为 false

给圆柱上色

加入颜色和旋转效果。

function setup() {
  createCanvas(400, 400, WEBGL); // 更大的画布
  describe('会旋转的彩色圆柱体');
}

function draw() {
  background(25); // 深色背景
  orbitControl(); // 允许鼠标旋转
  
  // 设置颜色（RGB 模式：红、绿、蓝）
  fill(100, 200, 255); // 浅蓝色
  
  // 让圆柱体旋转（随时间变化角度）
  rotateX(frameCount * 0.01); // 绕 x 轴旋转
  rotateY(frameCount * 0.02); // 绕 y 轴旋转
  
  // 绘制圆柱体：半径 60，高度 120，较圆（detailX=16），侧面平滑（detailY=3）
  cylinder(60, 120, 16, 3);
}

---

以上就是本文的全部内容啦，想了解更多 P5.js 用法欢迎关注 《P5.js中文教程》。

也可以➕我 green bubble 吹吹水咯

点赞 + 关注 + 收藏 = 学会了

Fabric.js 图片框选功能实现指南 概述 基于 Fabric.js 实现图片标注和区域选择功能，支持手动框选、预设区域、拖拽缩放等交互操作。

点赞 + 关注 + 收藏 = 学会了

如果你已经会用box()、sphere()画简单 3D 形状，想组合它们做出复杂模型，又担心画面卡顿，那么buildGeometry()就是你的 "性能救星"。这个函数能把多个简单形状 "焊接" 成一个自定义 3D 模型，让绘制效率飙升。

什么是 buildGeometry ()？

buildGeometry()是 p5.js 中用于组装复杂 3D 模型的工具函数。它的核心作用就像 "预制构件厂"：

• 把多个简单 3D 形状（比如box()、sphere()）组合成一个完整的p5.Geometry对象（可以理解为 "自定义 3D 零件"）；
• 这个 "零件" 只需要在程序启动时制作一次，之后每次绘制直接调用即可，大幅减少重复计算；
• 必须在WebGL 模式下使用（和所有 3D 函数一样）。

buildGeometry()就是来解决这个问题的：它能把多个简单 3D 形状 “打包” 成一个p5.Geometry对象，只需创建一次，之后反复绘制都不会卡顿。就像快递打包，把多个小包裹捆成一个大包裹，搬运起来更高效～

基础用法

用buildGeometry打包一个球体，然后绘制它。

let myShape; // 存储打包好的3D对象

function setup() {
  // 开启WebGL模式（3D绘图必备）
  createCanvas(400, 400, WEBGL);
  // 用buildGeometry创建3D对象，回调函数是makeShape
  myShape = buildGeometry(makeShape);
}

function draw() {
  background(200); // 灰色背景
  orbitControl(); // 允许鼠标拖动旋转视角
  lights(); // 添加光照（3D物体需要光照才看得见）
  model(myShape); // 绘制打包好的3D对象
}

// 回调函数：定义要打包的形状
function makeShape() {
  sphere(50); // 画一个半径50的球体
}

旋转的几何花朵

用buildGeometry组合多个锥体，形成一朵 “花”，然后让它随时间旋转并变色，展示高性能复杂 3D 动画的实现。

let flower;
let hueValue = 0; // 色相值（用于颜色变化）

function setup() {
  createCanvas(600, 600, WEBGL);
  // 创建几何花朵
  flower = buildGeometry(makeFlower);
}

function draw() {
  background(0); // 黑色背景
  orbitControl(); // 允许鼠标旋转视角
  lights(); // 光照
  
  // 颜色随时间变化（HSB模式：色相、饱和度、亮度）
  colorMode(HSB);
  fill(hueValue % 360, 80, 90);
  hueValue += 0.5;
  
  // 整体旋转（X和Y轴同时转，更有动感）
  // rotateX(frameCount * 0.005);
  rotateY(frameCount * 0.008);
  
  model(flower); // 绘制花朵
}

// 构建花朵形状的回调函数
function makeFlower() {
  // 中心球体
  sphere(15);
  
  // 周围的“花瓣”：12个锥体
  for (let i = 0; i < 12; i++) {
    push();
    // 绕Y轴均匀分布（360度/12=30度一个）
    rotateY(i * PI / 6);
    // 沿Z轴向外移动
    translate(0, 0, 40);
    // 锥体：底面半径10，高30，朝上
    cone(10, 30);
    pop();
  }
  
}

---

以上就是本文的全部内容啦，想了解更多 P5.js 用法欢迎关注 《P5.js中文教程》。

也可以➕我 green bubble 吹吹水咯

点赞 + 关注 + 收藏 = 学会了