Canvas 和 SVG的相爱相杀

KT猫啊
929 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

Canvas和Svg都是可以在我们的浏览器创建图形的，都是HTML5中支持的两种可视化技术，但是它们直接还是有很大的不同

1、什么是Canvas？

  • Canvas是H5的标签
  • Canvas画布，是采用JavaScript在网页上绘制我们想要的2D图形
  • 在标签上添加宽和高，可以不加单位
  • 采用绘制工具.getContext(“2d”) 来在画布中绘制图形
  • 在Canvas中，图形绘制完成，就不会被浏览器继续关注，如果位置发生变化，整个场景都会重新绘制，包括任何被图形覆盖的对象

2、什么是SVG

  • 可以缩放矢量图形
  • SVG不是H5的标签，最早出现的，是采用XML（超文本拓展语言，可以自定义标签或属性）描述2D图形的语言
  • SVG在DOM的每个元素都是可用的，可以添加JavaScript事件
  • SVG每个被绘制的图形都是一个对象，如果对象里面的属性发生变化，浏览器就会自动重现图形
  • SVG是通过DOM操作来显示的
  • SVG适合来做动态交互

3、Canvas和SVG的区别

绘制风格

  1. Canvas的工具getContext绘制出来的图形是位图更依赖分辨率。可以引入jpg或者png类似格式的图片
  2. SVG是在H5中直接绘制，但绘制出来的是矢量图不依赖分辨率。不能引入普通格式的图片。

位图：依赖分辨率
矢量图：不依赖分辨率

事件处理器的支持

Canvas不支持事件处理器

Canvas等于是一个画布，不能用js获取绘制好的图形元素

看下面🌰

<canvas id="myCanvas" width="800px" height="800px"></canvas>
<script>
    const myCanvas = document.getElementById('.myCanvas')
    const ctx = myCanvas.getContext("2d")
    ctx.beginPath()
    ctx.strokeStyle = 'pink'
    ctx.lineWidth = 20
    ctx.strokeRect = (400,100,80,100)

    ctx.fillStyle = 'red'
    ctx.fillRect = (100,300,200,100)
</script>

SVG支持事件处理器

SVG绘图的时候，每个图形都是以DOM节点的方式插进页面，可以用js直接操作

看下面🌰

<svg width="800px" height="800px">
 <rect x='20' y='20' width="100px" height="100px" style="fill:green;storke:red;store-winth:20"/>
</svg>
const rect = document.getElementById('.r1')
rect.style.fill = 'pink' //改变里面的背景颜色

应用范围

  1. 很多大型的网络游戏，里面有很多对象会被频繁的重绘，都是采用Canvas画布画出来的，包括我们前端所需要的可视化图表，Echarts的折线图，饼图，柱状图
  2. SVG是矢量图，我们会用它进行一些小动态的图标，也可以用来做地图，适合大区域渲染的应用程序，百度地图就是这么做出来的，当复杂度高的时候就减慢渲染的速度
avatar
文章
阅读
粉丝