总结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画出来的 ...
随机推荐
- SQL注入的浅尝辄止
简单的说,SQL注入就是通过在前端页面输入SQL语句,导致系统暴露异常信息在前端页面显示,非法者通过这些异常信息获取数据库的相干信息,为攻击系统做准备.
- TinyMCE插件:Filemanager [4.x-6.x] 文件名统一格式化
上传图片程序(filemanager/upload.php) 在if (!empty($_FILES) && $upload_files)中上传图片时,在文件正式上传至服务器前,有一次 ...
- python django-admin startproject django-admin命令未找到
在使用pip install安装django后使用django-admin生成项目失败解决办法 1.配置环境变量-在系统环境变量path添加后运行 D:\Program Files (x86)\pyt ...
- mfc和qt的区别
注:引用来源 http://wenda.chinabaike.com/b/30934/2013/1208/707410.html QT使用的编译器是MinGW,即Linux下的GCC移植到window ...
- linux 通过 openconnect 来连接学校内网
参考 http://xingda1989.iteye.com/blog/1969908 https://blog.csdn.net/edin_blackpoint/article/details/70 ...
- Simple, Poetic, Pithy
源自:Rob Pike points out Simple, Poetic, Pithy Don't communicate by sharing memory, share memory by co ...
- CSS基础part1
CSS 概述CSS 指层叠样式表 (Cascading Style Sheets),样式定义了如何显示 HTML文件中的标签元素,CSS是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标 ...
- Java设计模式(12)——结构型模式之门面模式(Facade)
一.概述 概念 简要示意图(没有一个统一的UML图) 角色 门面角色:门面模式核心,它被客户端调用,并且熟悉子系统 子系统角色:子系统,子系统并不知道门面的存在,门面对它来说只不过是另外一个客户端 ...
- 函数返回const,以便控制访问
#include <stdio.h> class const_out_parameter{ private: ]; public: int* const_out_parameter_tes ...
- 「赛后补题」Meeting(HDU-5521)
题意 A,B两个人分别在1和n区.每个区有若干点(区之间的点可以重复,各个区内点间的距离一致),给出区之间有联系的图以及到达所需时间.求两个人见面最短时间以及在哪个区碰面(可有多个) 分析 隐式图搜索 ...