canvas和svg的区别
讨论关于canvas和svg的区别。首先canvas是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,已经有十几年了。svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属性)描述二维图形的语言。在H5中看似canvas与svg很像,但是,他们有巨大的差别。
首先,从它们的功能上来讲,canvas可以看做是一个画布。,其绘制出来的图形为标量图,因此,可以在canvas中引入jpg或png这类格式的图片,在实际开发中,大型的网络游戏都是用canvas画布做出来的,并且canvas的技术现在已经相当的成熟。另外,我们喜欢用canvas来做一些统计用的图表,如柱状图曲线图或饼状图等。而svg,所绘制的图形为矢量图,所以其用法上受到了限制。因为只能绘制矢量图,所以svg中不能引入普通的图片,因为矢量图的不会失真的效果,在项目中我们会用来做一些动态的小图标。但是由于其本质为矢量图,可以被无限放大而不会失真,这很适合被用来做地图,而百度地图就是用svg技术做出来的。
另外从技术发面来讲canvas里面绘制的图形不能被引擎抓取,如我们要让canvas里面的一个图片跟随鼠标事件:canvas.onmouseover=function(){}。而svg里面的图形可以被引擎抓取,支持事件的绑定。另外canvas中我们绘制图形通常是通过javascript来实现,svg更多的是通过标签来来实现,如在svg中绘制正矩形形就要用<rect>,这里我们不能用属性style="width:XXX;height:XXX;"来定义。我再来介绍一个svg的js库:TWO.JS。其中包含two.js和three.js前者用于绘制二维图形,后者用于绘制三维图形。TWO.JS可以支持三种格式,svg(默认)、canvas、和WEBGL。当然也可以在普通div中引入。
canvas和svg的区别的更多相关文章
- 列表总结Canvas和SVG的区别
参考链接: 菜鸟教程 HTML5 内联SVG 经典面试题(讨论canvas与svg的区别) Canvas | SVG ---|--- 通过 JavaScript 来绘制 2D 图形|是一种使用 XML ...
- 总结Canvas和SVG的区别
参考链接: 菜鸟教程 HTML5 内联SVG 经典面试题(讨论canvas与svg的区别) Canvas SVG 通过 JavaScript 来绘制 2D 图形 是一种使用 XML 描述 2D 图形的 ...
- 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画出来的 ...
随机推荐
- Leetcode 18
class Solution { public: vector<vector<int>> fourSum(vector<int>& nums, int ta ...
- CF 920
t1 随便乱搞 t2 随便乱搞 然后wa了三发,QAQ t3 随便乱搞 t4 邻接表+堆 对进出进行一个统计 然后时间到了...
- halcon之最小二乘拟合直线
如果不了解最小二乘算法 请先阅读: Least squares的算法细节原理https://en.wikipedia.org/wiki/Least_squares 通常在halcon中拟合直线会用ho ...
- Android 遍历全国地区位置(一)
1.布局 choose_area.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayo ...
- Jenkins插件开发(四)-- 插件发布
上一篇blog介绍了插件开发中要注意的一些问题, 我们再来介绍插件开发完成后,如何上传到jenkins的插件中心(这里假设你的代码是放在github上的,使用svn或其他版本管理工具的请参考其他文章) ...
- Mysql查询正在运行的事务以及杀掉它
查询 正在执行的事务:SELECT * FROM information_schema.INNODB_TRX 根据这个事务的线程ID(trx_mysql_thread_id): 可以使用mysql命令 ...
- Scss开发临时学习过程||webpack、npm、gulp配置
SCSS语法: 假设变量申明带有!default,那么如果在此申明之前没有这个变量的申明,则用这个值,反之如果之前有申明,则用申明的值. ‘...’传递多个参数: @mixin box-shadow( ...
- springboot整合mybatis增删改查(三):mybatis逆向工程
上一篇已经把项目基本框架完善,接下来就是利用Mybatis Generator逆向工程进行mybatis的整合. 我们在创建项目开始的时候已经勾选web,mybatis,sql等,但是这些依赖还是不够 ...
- Codeforces 165 E. Compatible Numbers【子集前缀和】
LINK 题目大意 给你一个数组,问你数组中的每个数是否可以在数组里面找到一个数和他and起来是0,如果可以就输出这个数,否则就输出-1 思路 首先很显然的是可以考虑找到每个数每一位都取反的数的子集 ...
- 7-31 The World's Richest(25 分)
Forbes magazine publishes every year its list of billionaires based on the annual ranking of the wor ...