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. 搭建C++环境

    因为测试用例是C++,我必须安装对应的C++环境,否则跑不起C++代码.突然觉得VsCode如此操蛋,觉得为什么就不能像Eclipse中的Maven那样,安装插件就集成了Maven所必需的,省了安装这 ...

  2. Python基础(8)——常见模块

    模块介绍 time &datetime模块 random os sys shutil json & picle shelve xml处理 yaml处理 configparser has ...

  3. 基于SaaS的企业数据隐私保护平台

    导读 WireWheel成立于2016年,总部位于华盛顿,该公司致力于降低数据隐私保护合规能力建设的难度,帮助企业来应对复杂.严厉的法案.条例规定.2018年10月,公司获得了PSP Growth领投 ...

  4. 深入浅出的webpack构建工具---webpack3版本的CommonsChunkPlugin详解(六)

    阅读目录 一:什么是CommonsChunkPlugin, 它的作用是什么? 二:webpack3中CommonsChunkPlugin配置项及含义? 回到顶部 一:什么是CommonsChunkPl ...

  5. java.lang.UnsatisfiedLinkError: No implementation found for int com.baidu.platform.comjni.map.commonmemcache.JNICommonMemCache.Create()

    完整异常: Process: com.example.ai.tabhostdemo, PID: 1287 java.lang.UnsatisfiedLinkError: No implementati ...

  6. uboot-jiuding 下主Makefile详解

    主Makefile位于uboot源码的根目录下,其内容主要结构为: 1. 确定版本号及主机信息(23至48行)2. 实现静默编译功能(48至55行)3. 设置各种路径(56至123行)4. 设置编译工 ...

  7. java中的异常区分

    在上图中,粉红色的部分为受检查的异常,其必须被try{}catch语句块所捕获,或者在方法中向外抛出异常 绿色的异常为运行时异常,需要程序员自行分辨是否要解决异常或者抛出异常,例空指针数组下标越界等等 ...

  8. sessionStorage和localStorage的区别

    JS的本地保存localStorage.sessionStorage用法总结 localStorage.sessionStorage是Html5的特性,IE7以下浏览器不支持 为什么要掌握localS ...

  9. cgroup.conf系统初始配置

    # Slurm cgroup support configuration file # # See man slurm.conf and man cgroup.conf for further # i ...

  10. 《Linux内核设计与实现》第一二章笔记

    第一章 linux内核简介 每个处理器在任何时间点上的活动必然概括为下列三者: 运行于用户空间,执行用户进程 运行于内核空间,处于进程上下文,代表某个特定的进程执行 运行于内核空间,处于中断上下文,与 ...