跳到主要内容

SVG与Canvas

  • canvas 是一个画布，绘制出来的图形是位图
  • svg 绘制的是矢量图。不会失真

SVG与Canvas比较​

  • svg 是一种矢量图，而 canvas 依赖于分辨率。所以 svg 放大不会失真，但是 canvas 绘制的图形会失真。

  • svg 支持事件处理器，而 canvas 不支持事件处理器。

  • svg 中的文字独立于图像，文字可保留，可编辑和可搜索，canvas 的文本渲染能力弱。

  • canvas 适合图像密集型的游戏，频繁地重绘图像，svg 绘制的复杂度高时减慢渲染的速度。

  • canvas 绘制的图形可以多种格式 (jpg、png) 保存图片，但是 svg 绘制的只能以 .svg 格式保存，使用时可以引入 html 文件。

  • canvas 适合开发游戏，svg 不适合游戏应用。

什么是Canvas污染？​

Canvas污染

将一张跨域的图片绘制到 canvas 上，这个 canvas 就是被污染的，此时无法读取该 canvas 的数据

  • 目的：禁止使用canvas随意从另一个网站加载图片再转换成数据的强盗行为。

如何解决 canvas 污染的问题？

  • 1、可以把所有图片都重定向到同一个域名下
  • 2、可以把图片转换成base64,然后放到img标签里面，再绘制到canvas

canvas如何进行局部刷新（局部重绘）​

局部重绘 简单来说 就是就是只绘制变化的部分，不变化的部分就不用绘制了

  • 不需要清空 Canvas 的全局区域，而是根据运动的元素的范围来清空部分区域

canvas性能分析/优化​

  1. 哪些因素会影响canvas的性能
  2. canvas优化的几种方式

浏览器的刷新频率是 60赫兹

  • 绘制的图形的数量和大小会影响canvas的性能

  • 图形数量过多，但是只刷新部分 可以使用局部渲染

  • 如果某些长时间的逻辑影响主线程，可使用WebWorker

  • 利用分层渲染复杂场景

canvas分层渲染​

https://www.codingsky.com/doc/2021/12/12/98.html

有时候全量绘制是没有必要的，只渲染发送变化的内容，降低渲染的开销，提高渲染性能

  • Canvas 画布自身并不支持分层，为了实现分层需要我们引入多个 <canvas /> 元素。每个 <canvas /> 元素就是一个分层

SVG与Canvas如何选择？​

  • 事件处理问题：canvas 绘制的图形，只能给 canvas 整个画布添加事件，而不能给某个图形或文件添加事件处理器，但是 svg 支持事件绑定，如果需要添加带有事件的动画效果时，就需要选择 svg。
  • svg 绘制的是矢量图，放大后不会失真，比较适合地图

svg动态颜色设置​

  • 如果需要css动态设置svg颜色，不要写死svg颜色，否则无法通过css来设置
  • fill、stroke都指定currentColor
  • currentColor 是一个 CSS 关键字，会取当前元素或者父元素的color值