总结Canvas和SVG的区别
参考链接:
菜鸟教程 HTML5 内联SVG
经典面试题(讨论canvas与svg的区别)
Canvas | SVG |
---|---|
通过 JavaScript 来绘制 2D 图形 | 是一种使用 XML 描述 2D 图形的语言 |
是HTML5提供的新元素<canvas> |
历史久远,并不是HTML5转悠的标签 |
位图(标量图),放大或改变尺寸会失真;逐像素进行渲染,依赖分辨率 | 矢量图,放大或改变尺寸不会失真;不依赖分辨率 |
弱的文本渲染能力(因为放大会失真) | 最适合带有大型渲染区域的应用程序,比如谷歌地图(因为放大不会失真) |
能够以 .png 或 .jpg 格式保存结果图像;能够引入 .png 或 .jpg格式的图片 | 不能以 .png 或 .jpg 格式保存结果图像;不能引入 .png 或 .jpg格式的图片 |
不支持事件处理器(一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。) | 支持事件处理器(SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。) |
不能被引擎抓取 | 可以被引擎抓取 |
--- | 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) |
最适合图像密集型的游戏,其中的许多对象会被频繁重绘 | 不适合游戏应用 |
总结Canvas和SVG的区别的更多相关文章
- 列表总结Canvas和SVG的区别
参考链接: 菜鸟教程 HTML5 内联SVG 经典面试题(讨论canvas与svg的区别) Canvas | SVG ---|--- 通过 JavaScript 来绘制 2D 图形|是一种使用 XML ...
- canvas和svg的区别
讨论关于canvas和svg的区别.首先canvas是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,已经有十几年了.svg并不是html5专有的标签,最初 ...
- canvas、svg、canvas与svg的区别
一.canvas canvas 画布,位图 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形 注意:不要在style中给canvas设置宽高,会有位移差 can ...
- 前端绘图方式Canvas和SVG的区别
Canvas和SVG是html5中支持2种可视化技术,都是可以在画布上绘制图形和放入图片.下面来介绍和分析一下他们. 一.Canvas 和 SVG 简介 1.什么是Canvas? Canvas 是H5 ...
- 【HTML5】Canvas和SVG的区别
* SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 ...
- Canvas 与 SVG 的区别
这个说实话,我只用过canvas画过一些简单的图形,复杂的不懂,之所以列出来,是因为之前在面试中有被问到,在这里mark一下,后期深化. 以下的内容全部来自于w3school http://www.w ...
- canvas与svg的区别
1.历史: canvas是html5提供的新元素. 而svg存在的历史要比canvas久远,已经有十几年了.svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或 ...
- html5 Canvas和SVG的区别是什么(总结)
html5 Canvas和SVG的区别是什么(总结) 一.总结 一句话总结:都是2D做图,svg是矢量图,canvas是位图.Canvas 是逐像素进行渲染的,适合游戏. 1.svg的全称是什么? S ...
- canvas与svg区别
canvas与svg区别 和SVG比起来有两个弱点,一个是画布里的内容是独立的,不能当成html元素:二是CANVAS是属于位图格式,而SVG是矢量图,可以平滑放大. HTML5的canvas画出来的 ...
随机推荐
- mqtt使用一
最近做的一个项目用到了mqtt协议,我需要从第三方订阅主题接受消息,还需要自己搭建,mqtt服务器去发布主题.下面就详细介绍一下环境的搭建和使用. 1.mqtt介绍 MQTT是一个基于客户端-服务器的 ...
- django的验证码
pip install Pillow==3.4.1在views.py中创建一个视图函数 from PIL import Image, ImageDraw, ImageFont from django. ...
- python+selenium实现自动抢票
使用说明 程序运行开始,需要输入出发地,目的地,出发时间,乘客信息,车次:乘客信息和车次可以输入多个 刚刚开始学习爬虫,selenium仅仅是解放了双手,运行效率不是很高: 程序运行时会打开chrom ...
- 《AngularJS学习整理》系列分享专栏
<AngularJS学习整理>系列分享专栏 <AngularJS学习整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/re ...
- BIOS简单讲解
学习链接: http://www.xuetangx.com/courses/course-v1:TsinghuaX+30240243X+sp/courseware/1d95cdf6f0e9434488 ...
- 虚拟机的三种联网模式(桥接模式、NAT 模式、仅主机模式)
虚拟机的网络连接方式分为三种,分别是桥接模式.NAT 模式.和仅主机模式,三种连接模式存在着一定的差异,那么我们该如何选择适合自己的连接模式呢? 1.桥接模式:在此模式下,虚拟机相当于一台独立的电脑, ...
- fedora19之后的版本安装mysql
正准备学习linux平台的mysql,却发现在fedora21平台下安装mysql总是失败,查了些资料,总结如下: 错误示范: 按照安装软件的经验,习惯性输入以下的命令: $sudo dnf inst ...
- 北京Uber优步司机奖励政策(12月14日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- 【机器学习笔记】EM算法及其应用
极大似然估计 考虑一个高斯分布\(p(\mathbf{x}\mid{\theta})\),其中\(\theta=(\mu,\Sigma)\).样本集\(X=\{x_1,...,x_N\}\)中每个样本 ...
- spring源码-自定义标签-4
一.自定义标签,自定义标签在使用上面相对来说非常常见了,这个也算是spring对于容器的拓展.通过自定义标签的方式可以创造出很多新的配置方式,并且交给容器直接管理,不需要人工太多的关注.这也是spri ...