canvas 与 svg

本文对比分析了HTML5的canvas和SVG两种绘图技术。canvas是2D绘图API,通过JavaScript实现动态绘图和动画,适合复杂交互场景。SVG是基于XML的矢量图形语言,支持高保真静态图片和简单的动画,适用于需要缩放不失真的图形展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

canvas

canvas 是 HTML 5 新出的图片元素,它是 2d 绘图 API, 使用 JavaScript 调用API 可以画 lines, shapes, images, text 甚至其他你想话的, 并且不需要什么插件。

它是作为一个画布存在在网页中, 画布上有你绘制的图案,利用 js 你可以实时的改变画布上的图案,以实现动画。

它的支持性也挺好,IE 9 开始支持,Chrome和Opera 9+ 也支持。

svg

SVG 可缩放矢量图形, 是 XML 用来描述二维图形和绘图程序的语言。目前SVG在Firefox、Opera、Webkit浏览器、IE等浏览器中已经部分实现。

什么是 XML
它是一种类似于 HTML 的标记语言,设计宗旨在于传输数据而不是显示数据。
XML 数据以纯文本格式进行存储,因此提供了一种独立于软件和硬件的数据存储方法。通过读取你可以获取存储于其中的数据

SVG可以通过定义必要的线和形状来创建一个图形,也可以修改已有的位图,或者将这两种方式结合起来创建图形。图形和其组成部分可以变形,可以合成,还可以通过滤镜完全改变外观。

SVG提供了一些元素,用于定义圆形、矩形、简单或复杂的曲线,以及其他形状。
一个简单的SVG文档由 <svg> 根元素和基本的形状元素构成。另外还有一个g元素,它用来把若干个基本形状编成一个组。

eg:

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

可以看到 svg 是在内部组合各种元素绘制形成相应的图案。 并且矢量顾名思义是可以自由缩放的,根据屏幕像素点进行缩放,保留了图案的高清晰度。

总结

通过以上,我们可以知道 svg 和 canvas 的相同点,它们都是可以绘图的元素,并有自身的用法。
canvas 是一块画布,纯用 js 去画画的。根据你的 js 编写,动态去渲染画布上的图案,适用一些大量数据交互修改的,比较复杂的动画。由于它仅仅是根据你设定的大小,它是依赖于分辨率的。
而 svg 是一个个元素组成在一起的, 包含 animate 元素,可做一些小小的动画, 它的矢量优点也更适合做一些高保真的静态图片。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值