讨论关于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的区别的更多相关文章

  1. 列表总结Canvas和SVG的区别

    参考链接: 菜鸟教程 HTML5 内联SVG 经典面试题(讨论canvas与svg的区别) Canvas | SVG ---|--- 通过 JavaScript 来绘制 2D 图形|是一种使用 XML ...

  2. 总结Canvas和SVG的区别

    参考链接: 菜鸟教程 HTML5 内联SVG 经典面试题(讨论canvas与svg的区别) Canvas SVG 通过 JavaScript 来绘制 2D 图形 是一种使用 XML 描述 2D 图形的 ...

  3. canvas、svg、canvas与svg的区别

    一.canvas canvas 画布,位图 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形 注意:不要在style中给canvas设置宽高,会有位移差 can ...

  4. 前端绘图方式Canvas和SVG的区别

    Canvas和SVG是html5中支持2种可视化技术,都是可以在画布上绘制图形和放入图片.下面来介绍和分析一下他们. 一.Canvas 和 SVG 简介 1.什么是Canvas? Canvas 是H5 ...

  5. 【HTML5】Canvas和SVG的区别

    * SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 ...

  6. Canvas 与 SVG 的区别

    这个说实话,我只用过canvas画过一些简单的图形,复杂的不懂,之所以列出来,是因为之前在面试中有被问到,在这里mark一下,后期深化. 以下的内容全部来自于w3school http://www.w ...

  7. canvas与svg的区别

    1.历史: canvas是html5提供的新元素. 而svg存在的历史要比canvas久远,已经有十几年了.svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或 ...

  8. html5 Canvas和SVG的区别是什么(总结)

    html5 Canvas和SVG的区别是什么(总结) 一.总结 一句话总结:都是2D做图,svg是矢量图,canvas是位图.Canvas 是逐像素进行渲染的,适合游戏. 1.svg的全称是什么? S ...

  9. canvas与svg区别

    canvas与svg区别 和SVG比起来有两个弱点,一个是画布里的内容是独立的,不能当成html元素:二是CANVAS是属于位图格式,而SVG是矢量图,可以平滑放大. HTML5的canvas画出来的 ...

随机推荐

  1. 简话Angular 00 为什么要学Angular

    一句话: 现在不学Angular的结局,就和5年前不学JQuery一样! 谁学谁知道,早学早进阶! 1. JQuery vs Javascipt 问两个问题: 1) 你用过JQuery吗?当然! 2) ...

  2. 《剑指offer》习题解答(C/C++)

    1.二维数组中的查找 /* 题目:在一个二维数组中,没一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序. 请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...

  3. GVIM设置背景颜色

    首先找到GVim的安装目录,在安装目录下你可以发现一个_vimrc文件,使用文本编辑器打开后在里面添加两行代码即可:代码如下set gfn=Courier_New:h14colorscheme tor ...

  4. 如何处理HTML5新标签的兼容性问题

    支持HTML5新标签: * IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签, 浏览器支持新标签后,还需要添 ...

  5. New Concept English Two 14 34

    recently  busy  a lot ,just  practices   every   morning. $课文32  购物变得很方便 324. People are not so hone ...

  6. 如何修改windows系统的host文件

    方法/步骤   首先我们打开我的计算机     然后我们进入C盘的C:\Windows\System32\drivers\etc这个目录下面找到host这个文件   双点击打开,选择计算本打开,这时可 ...

  7. Leetcode 1024. Video Stitching

    class Solution: def helper(self,l,r,clips)->int: maxL,maxR=0,0 iL,iR=-1,-1 for i,c in enumerate(c ...

  8. Codeforces 868F. Yet Another Minimization Problem【决策单调性优化DP】【分治】【莫队】

    LINK 题目大意 给你一个序列分成k段 每一段的代价是满足\((a_i=a_j)\)的无序数对\((i,j)\)的个数 求最小的代价 思路 首先有一个暴力dp的思路是\(dp_{i,k}=min(d ...

  9. centos6.5下tomcat安装

    1.安装JDK 安装:rpm –ivh jdk-7u5-linux-i586.rpm2.配置Tomcat 解压:tar -zxvf apache-tomcat-8.0.11.tar.gz 移动到/us ...

  10. bzoj 2007 [Noi2010]海拔——最小割转最短路

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2007 一个点的高度一定不是0就是1.答案一定形如一个左上角的连通块全是0的点.一个右下角的连 ...