canvas与svg都是用于在网页上绘制图形(位图)。

  canvas是HTML5新出来的一个标签,用来定义一块画图的区域(canvas本身没有绘制能力),用JavaScript来画图,可以绘制路径、矩形、文本、图片以及圆形。

  使用方式:

    先在HTML里添加一个<canvas></canvas>标签,用行内样式设置宽高,然后在JavaScript里进行绘制。

  SVG是可缩放矢量图形(scalable vector graphics)。

  svg是用于绘制矢量图形,使用XML格式定义图形。使用起来方便,压缩性更好,可在任何分辨率下高质量打印,放大缩小不容易失真。

  使用方式:

    以前是用XML格式写好,保存成svg格式。然后HTML可以通过<embed></embed>(不推荐)<object></object>(不推荐)<inframe></inframe>这三个标签嵌入。

    在HTML5中新增了<svg></svg>标签,在svg标签中添加<rect></rect>等各种形状标签就可以绘图;

  对于canvas与svg:

    1、canvas是逐个像素渲染绘制的,而且不能直接选到图形,所以要改动就只能全部都改,或直接选到相应坐标叠上去。而且每个图形不能直接添加事件,只能通过canvas的相应坐标来添加事件。也就是说,canvas是不能单独操作某个图形。

      svg里面的图形都是一个标签,可以被获取、添加事件,修改之后浏览器也能重新绘图,修改方便;

    2、canvas 文本渲染能力差,也比较依赖分辨率

      svg不依赖分辨率,适合大型渲染,矢量图不易失真,适用于地图等图形的绘制

    3、canvas 适用于图像密集重复的游戏绘制。

      svg由于渲染问题,不方便做复杂 的图像,所以基本告别游戏。

  在实际情况下,根据不同的情况自己判断吧。

canvas与svg的更多相关文章

  1. HTML5新特性——HTML 5 Canvas vs. SVG

    Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...

  2. 【HTML5】Canvas和SVG的区别

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

  3. Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的

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

  4. HTML5 Canvas、内联 SVG、Canvas vs. SVG

    canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...

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

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

  6. H5 Canvas vs. SVG

    HTML 5 Canvas vs. SVG HTML5 SVG HTML5 地理定位 Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XM ...

  7. canvas与svg区别

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

  8. Canvas 和 SVG 的不同

    Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...

  9. HTML 5 Canvas vs. SVG

    pick up from http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp Canvas 与 SVG 的比较 下表列出了 canvas ...

随机推荐

  1. docker安装,err:exit status 255,提示找不到虚拟机IP

    我遇到这个问题是因为,BIOS没有打开虚拟化技术,导致虚拟机无法成功创建,自然找不到IP. 解决: 1.进入BIOS,高级选项卡下,找到虚拟化技术开关,打开即可.具体做法,可搜网文. 2.删除原来自动 ...

  2. 深度学习基础(四) Dropout_Improving neural networks by preventing co-adaptation of feature detectors

    该笔记是我快速浏览论文后的记录,部分章节并没有仔细看,所以比较粗糙. 从摘要中可以得知,论文提出在每次训练时通过随机忽略一半的feature detectors(units)可以极大地降低过拟合.该方 ...

  3. 笔试中常用c++接口

    1.stack:https://www.cnblogs.com/hdk1993/p/5809161.html 使用该容器时需要包含#include<stack>头文件: 定义stack对象 ...

  4. vue 点击图片放大

    文档:https://www.npmjs.com/package/vue-directive-image-previewer [只能弹框查看 不能关闭和播放下一张,其他功能使用别的插件] 安装: np ...

  5. defaultdict(list)

  6. FPC全制造组装的流程介绍(转载)

    [维文信FPC]FPC又称柔性电路板,FPC的PCBA组装焊接流程与硬性电路板的组装有很大的不同,因为FPC板子的硬度不够,较柔软,如果不使用专用载板,就无法完成固定和传输,也就无法完成印刷.贴片.过 ...

  7. Vue + webpack 项目实践

    Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...

  8. php 解密小程序获取unionid

    小程序代码 php代码 public function login2() { $post = input(); if (!empty($post)) { $appid = $this->wxap ...

  9. Oracle 12C 密码文件问题 ORA-01017: invalid username/password; logon denied

    新安装的Oracle 12.1.0.2.0,NBU在测试备份的时候报ORA-01017 --alter user sys identified by "Wwjd!23";sqlpl ...

  10. Android Profiler内存检测

    Memory Profiler是Android Profiler中的一个组件,Android Profiler是Android3.0用来替换之前Android Monitor的观察工具,主要用来观察内 ...