浅谈svg和canvas底层渲染

阿帕琪尔
133 阅读3分钟

使用场景

SVG（可缩放矢量图形）和Canvas都是在网页上绘制图形的技术，但使用方法（api）和底层使用的图形库都不相同，在渲染性能方面也不同，下面会讲到，至于新出的webgpu这里暂时不讨论

svg：

绘制矢量图，基于XML的文件格式

优点：

  • 可缩放性：图形不会因缩放而失真。

  • 可编辑性：可以使用CSS和JavaScript轻松修改样式和行为。

  • 动画：支持基于CSS和SMIL的动画。

缺点：

  • 对于复杂图形或大量元素，性能可能不如Canvas。
  • 不适合处理实时更新的动态图形。

案例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG 示例</title>
</head>
<body>
    <h1>简单的 SVG 示例</h1>
    <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
        <!-- 矩形 -->
        <rect x="50" y="20" width="150" height="100" fill="lightblue" stroke="blue" stroke-width="2"/>
        <!-- 圆形 -->
        <circle cx="300" cy="70" r="40" fill="lightgreen" stroke="green" stroke-width="2"/>
        <!-- 文本 -->
        <text x="50" y="150" font-family="Arial" font-size="20" fill="black">这是一个矩形</text>
        <text x="270" y="150" font-family="Arial" font-size="20" fill="black">这是一个圆形</text>
    </svg>
</body>
</html>

canvas：

绘制位图，也就是像素图

  • 优点：

    • 性能：在绘制大量像素或动画时性能较好，适合游戏和实时图形。
    • 灵活性：可以绘制复杂的图形、图像和动画。

  • 缺点：

    • 不可缩放性：图形一旦绘制，无法在不失真的情况下进行缩放。
    • 不可编辑性：绘制后不能轻易修改个别元素，只能重新绘制整个画布。

2d使用图形库的api

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

3d使用webgl

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('webgl');

底层渲染区别

svg和canvas2d（getContent('2d')）基本都是使用图形库去做渲染的，而canvas3d（getContent('webgl')）使用的是webgl api。

常见的图形库：

  • Skia：是一个开源的2D图形库，广泛用于Chrome、Firefox等浏览器
  • Direct2D：某些浏览器（如Edge）可能使用，是微软的高性能2D图形API，专为Windows开发
  • Core Graphics：这是Apple提供的2D图形API，在macOS和iOS平台上的浏览器中使用

图形库和webgl的区别

  • 图形库：

    • 场景：主要用于2D图形的渲染，如Skia和Cairo，专注于处理矢量图形、文本绘制、渐变和阴影等。
    • 硬件：提供基本的绘图功能，通常依赖CPU进行渲染，这里类似解析和渲染html。
    • 开发难度：相比webgl来说，更简单，因为不需要直接对GPU编程
    • 性能：如果涉及复杂图形（如：3d），受限CPU串行计算及核心数量，渲染性能不如webgl，而且最终还是需要把计算后的数据交给GPU进行渲染

  • WebGL：

    • 场景：是一个基于OpenGL ES的API，专为高性能3D图形渲染设计。
    • 硬件：利用GPU进行渲染，能够处理复杂的3D场景、光照、纹理和动画效果， 也可以用于2D图形渲染，但其优势在于3D处理。
    • 开发难度：相比图形库来说，更难更复杂，因为直接对GPU编程，需要写shader
    • 性能：大部分计算可以交给GPU执行，GPU并行计算&核心数很多，性能比使用图形库高

总结

  • 图形库：渲染性能较差，cpu计算，最终结果交给GPU渲染，但编程难度低
  • svg：渲染矢量图，底层使用图形库，会触发回流重回
  • canvas2d：渲染位图，底层也使用图形库
  • canvas3d：使用webgl api，可以把大部分计算交给GPU，性能好，但是编程难度高
avatar
文章
阅读
粉丝