总结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画出来的 ...
随机推荐
- 浏览器端用JS实现创建和下载图片
问题场景 在前端很多的项目中,文件下载的需求很常见.尤其是通过JS生成文件内容,然后通过浏览器端执行下载的操作.如图片,Execl 等的导出功能.日前,项目中就遇到了这类需求,在浏览器端实现保存当前网 ...
- nginx通过upstream实现负载均衡
随着业务和用户不断增加,单台服务器无法满足业务需求,产生服务器集群的场景.为了能充分利用服务器集群,最理想的方式就是整个集群的利用率都很平均且稳定在理想值范围内. 负载均衡(Load Balance) ...
- 浅谈Django的中间件与Python的装饰器
浅谈Django的中间件 与Python的装饰器 一.原理 1.装饰器是Python的一种语法应用,利用闭包的原理去更改一个函数的功能,即让一个函数执行之前先到另外一个函数中执行其他需求语句,在执行该 ...
- socketpair通信
1.线程间通信(参考安卓源码InputTransport.cpp) #include <pthread.h> #include <sys/types.h> /* See NOT ...
- 企业网站被黑 dedecms漏洞修复办法
前段时间网站被黑了,从百度打开网站直接被劫持跳转到了彩票,du博网站上去,网站的首页index.html文件也被篡改成一些什么北京sai车,pk10,一些cai票的关键词内容,搞得网站根本无法正常浏览 ...
- linux进程篇 (三) 进程间的通信3 IPC通信
3 IPC通信 用户空间 进程A <----无法通信----> 进程B -----------------|--------------------------------------|- ...
- 【数据结构】循环链表&&双向链表详解和代码实例
喜欢的话可以扫码关注我们的公众号哦,更多精彩尽在微信公众号[程序猿声] 01 循环链表 1.1 什么是循环链表? 前面介绍了单链表,相信大家还记得相关的概念.其实循环链表跟单链表也没有差别很多,只是在 ...
- Hadoop端口
本文转自:<Hadoop默认端口应用一览> Hadoop集群的各部分一般都会使用到多个端口,有些是daemon之间进行交互之用,有些是用于RPC访问以及HTTP访问.而随着Hadoop周边 ...
- 使用ChipScope Pro调试硬件
chipscope_icon提供与其他ChipScope内核的通信 chipscope_opb_iba促进传统片上外设总线(OPB)事务的监控 chipscope_plb_iba便于监控处理器本地总线 ...
- sas简单使用
1 数据存取: 逻辑库: libname 自己起的名字 ‘文件所在的路径’,若无这步数据则存在默认的work中. 另一个方法在sas里自己建立一个逻辑库,但是关闭后就消失了. 新建数据:data ...