canvas和SVG可以在浏览器绘制图形,但是本质上是不同的。canves是绘制2d图象,SVG也是绘制2d图象。

Canvas是Javascript进行绘图的,是逐像素绘图。Canvas一旦图象绘制完成,就于浏览器无关了,图象的位置发生变化,整个场景都需要重新重新绘制,包括已经被覆盖的元素。

svg是使用xml绘制,可以为svg添加javascript的事件处理器。所有的DOM都是可用的,属性发生变化,浏览器会自动重新绘制。

SVG和Canvas的不同:

svg支持事件处理器,而Canvas不支持;

svg是通过XML定义的,而Canvas是通过javascript定义的。

Canvas可以保存为png或者jpg格式;

Canvas适合游戏场景绘图,很多对象需要频繁重绘,而SVG不适合游戏场景绘图;

Canvas支持分辨率,SVG不支持分辨率;

Canvas弱文本渲染能力,SVG适合带有大型渲染区域的应用程序;

SVG复杂度高会减慢绘图速度。

html5 画布和SVG的差别的更多相关文章

  1. html5 中的SVG 和canvas

    想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...

  2. HTML5中的SVG

    * SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...

  3. HTML5画布(CANVAS)速查简表

    HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/

  4. HTML5画布生成的3D飞船舰队效果

    在线演示 本地下载 使用HTML5画布2D来模拟3D的空间效果,生成舰队飞行效果,了解如何开发,请阅读下面代码相关“轻视频”: HTML5画布模拟生成3D的舰队飞行效果

  5. 使用HTML5画布(canvas)生成阴影效果

    来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...

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

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

  7. HTML5: HTML5 内联 SVG

    ylbtech-HTML5: HTML5 内联 SVG 1.返回顶部 1. HTML5 内联 SVG HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Ve ...

  8. html5中画布和SVG的比较

    SVG是基于XML的图形语言,在DOM解析中其每个元素都是可以用的,这样就可以为SCG元素附加JavaScript事件处理器,实现更加丰富的效果. 在SVG中,每个被绘制的图形均被视为对象,如果SVG ...

  9. HTML5学习之画布和SVG(四)

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. java 数据类型和运算符

    1.注释 单行注释:  //哈哈哈 多行注释: /* 啦啦啦 */ 文档注释: /**    */注释中包含一些说明性的文字及一些JavaDoc标签(后期写项目时,可以生成项目的API)        ...

  2. MySQL(三)用正则表达式搜索

    正则表达式是用来匹配文本的特殊的串(字符集合),将一个模式(正则表达式)与一个文本串进行比较: 所有种类的程序设计语言.文本编辑器.操作系统等都支持正则表达式,正则表达式用正则表达式语言来建立: My ...

  3. [04] JSP标准动作

    1.概述 JSP规范中定义了一系列的标准动作,Web容器按照规范进行了实现,可以解析并执行标准动作.而标准动作使用的是标准的xml语法,看上去也比较直观易懂,下面来看一个结构例子: <jsp:a ...

  4. BAT特殊字符

    BAT特殊字符1. 点 与echo连用,作用是换行 示例1 [输出空行] echo. 2 > 定向符[输出] 将命令的输出进行重定向 [一般用于将结果写入文件] 注意 nul 为空设备 > ...

  5. (转)Syntax error:

    但是运行时总是报下面这个错,如下: test11-loop.sh: 5: Syntax error: Bad for loop variable 几经查找语法,没有问题,后来在网上找到问题原因: 代码 ...

  6. 2.RapidIO串行物理层的包与控制符号

    转自https://www.cnblogs.com/liujinggang/p/9932150.html 一.RapidIO串行物理层背景介绍 上篇博文提到RapidIO的物理层支持串行物理层与并行物 ...

  7. Docker 快速验证 HTML 导出 PDF 高效方案

    需求分析 项目中用到了 Echarts,想要把图文混排,当然包括 echarts 生成的 Canvas 图也导出 PDF. 设计和实现时,分析了 POI.iText.freemaker.world 的 ...

  8. 【数据库】Mysql中主键的几种表设计组合的实际应用效果

    写在前面 前前后后忙忙碌碌,度过了新工作的三个月.博客许久未新,似乎对忙碌没有一点点防备.总结下来三个月不断的磨砺自己,努力从独乐乐转变到众乐乐,体会到不一样的是,连办公室的新玩意都能引起莫名的兴趣了 ...

  9. J-query extend()方法

    1.如果没有冲突参数会弥在后面. 2.参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值.

  10. poj1426 Find The Multiple(c语言巧解)

    Find The Multiple Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 36335   Accepted: 151 ...