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. async源码学习 - 全部源码

    因为工作需要,可能我离前端走远了,偏node方向了.所以异步编程的需求很多,于是乎,不得不带着学习async了. 我有个习惯,用别人的东西之前,喜欢稍微搞明白点,so就带着看看其源码. github: ...

  2. 看进程的启动时间长度 + vmstat + jstack 应用

    1.显示进程已运行的时间 $ ps -e -o pid,comm,etime 2.dd不断的向磁盘写入数据,所以bo的值会骤然提高,而cpu的wait数值也变高,说明由于大量的IO操作,系统的瓶径出现 ...

  3. 玩转 ”hello word“,Python程序员大多数都没有实现过

    很多人学习Python很长时间,对于'hello word' 的认知,很多已经从事Python多年的程序员的认知也就只有: print(hello wrod) 但是有没有让hello word 变得不 ...

  4. php实现一个单链表

    单链表,节点只有一个指针域的链表.节点包括数据域和指针域. 因此用面向对象的思维,节点类的属性就有两个:一个data(表示存储的数据),一个指针next(链表中指向下一个节点). 链表一个很重要的特性 ...

  5. CF633H Fibonacci-ish II 莫队、线段树、矩阵乘法

    传送门 这题除了暴力踩标程和正解卡常数以外是道很好的题目 首先看到我们要求的东西与\(Fibonacci\)有关,考虑矩阵乘法进行维护.又看到\(n \leq 30000\),这告诉我们正解算法其实比 ...

  6. HTML 图片轮播制作工具

    下载地址:http://wowslider.com/download/wowslider-win-setup.zip?utm_source=free_downl_win&utm_medium= ...

  7. NOIP2018 模拟赛(二十二)雅礼NOI

    Preface 这次的题目都是NOI+的题,所以大家的分数都有点惨烈. 依靠T1大力骗分水到Rank2 所以想看正解的话看这里吧 A. 「雅礼NOI2018模拟赛(一) Day1」树 看一眼题目感觉十 ...

  8. 数列分块入门九题(一):LOJ6277~6279

    Preface 分块,一个神奇的暴力算法.可以把很多\(O(n^2)\)的数据结构题的暴力优化到常数极小的\(O(n\sqrt n)\).当一些毒瘤题无法用线段树,主席树,平衡树,树状数组...... ...

  9. Tensorflow实例:利用LSTM预测股票每日最高价(一)

    RNN与LSTM 这一部分主要涉及循环神经网络的理论,讲的可能会比较简略. 什么是RNN RNN全称循环神经网络(Recurrent Neural Networks),是用来处理序列数据的.在传统的神 ...

  10. .net core实践系列之短信服务-为什么选择.net core(开篇)

    前言 从今天我将会写.net core实战系列,以我最近完成的短信服务作为例子.该系列将会尽量以最短的时间全部发布出来.源码也将优先开源出来给大家. 源码地址:https://github.com/S ...