「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」
随着 html5 的到来，前端界迎来了两个美术 🎨 大师 —— svg 和 canvas，那他们到底谁才是前端界的图形大咖？？？No.1 中的 No.1呢？？？
为满足小伙伴的好奇心，我们今天特意准备一场来自 svg 和 canvas 之间的 PK 大战，下面有请 👭 我们的两位大咖 ✨ 闪亮 ✨ 登场！！！！！！
deng...deng... deng...deng... ...
嘉宾1: svg
中文名：可缩放矢量图形全称：Scalable Vector Graphics语言：XML特长：展示二维矢量图形，不受图像分辨率影响擅长领域：地图等渲染，计算复杂度比较高的晦涩领域：游戏 🎮
嘉宾2: canvas
语言：JavaScript（本文中用 js 代替）特长：绘制 2D 图像，可以通过 .png 和 .jpg 来保存缺点：极其依赖分辨率、自身不会变通，需要通过 js 控制，而且每改一次都需再从零 0⃣️ 开始渲染擅长领域：游戏 🎮 等图像密集型的场景，适合频繁重绘对象的场景晦涩领域：文本渲染、需要支持事件处理器的地方
自述环节：
svg：我绘制的是矢量图（通过 XML 描述的 2D 图形），图像清晰度比较高，连个头发丝我都能给你画出来，而且我绘制的矢量图可以随意的放大缩小，都不会影响展现的细节的。你可以为我绘制的每个节点添加事件，赋予这些节点生命力，让他们想干啥就干啥。我的每个元素的属性如果发生了变化，就会通知浏览器赶紧来重新渲染。可塑性非常高，能做的事情也很多。
canvas：我绘制的是位图（通过 js 来控制实现的 2D 图形），在很多的大型游戏中都会看到我的身影呦。绝对可以称霸游戏界，在游戏界，我若称第二，绝对没有人敢称第一 ☝️。分分钟就可以秒杀 svg 😄😄😄😄😄😄
请说说如何能够让小伙伴们掌握？？？
svg：闲时看看 XML ，再了解了解 W3C 标准，轻松 😉 上手不发愁
canvas：会 js 就行，随便画画点-线-面，再把它们拼起来，这不就成了嘛
看过 👀 了两位大咖的精彩 PK 之后，相信小伙伴们也对它们有了一个初步的了解了吧，两位都有自己擅长和不擅长的领域，它们在各自的领域中都是独占鳌头的存在，都是 No.1 中的 No.1 。
非常期待在小伙伴们的作品中能够看到更多 svg 和 canvas 两位大咖的身影哦！！！！！！
