canvas与svg
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的更多相关文章
- HTML5新特性——HTML 5 Canvas vs. SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...
- 【HTML5】Canvas和SVG的区别
* SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 ...
- Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的
SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 SV ...
- HTML5 Canvas、内联 SVG、Canvas vs. SVG
canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...
- 列表总结Canvas和SVG的区别
参考链接: 菜鸟教程 HTML5 内联SVG 经典面试题(讨论canvas与svg的区别) Canvas | SVG ---|--- 通过 JavaScript 来绘制 2D 图形|是一种使用 XML ...
- H5 Canvas vs. SVG
HTML 5 Canvas vs. SVG HTML5 SVG HTML5 地理定位 Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XM ...
- canvas与svg区别
canvas与svg区别 和SVG比起来有两个弱点,一个是画布里的内容是独立的,不能当成html元素:二是CANVAS是属于位图格式,而SVG是矢量图,可以平滑放大. HTML5的canvas画出来的 ...
- Canvas 和 SVG 的不同
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...
- HTML 5 Canvas vs. SVG
pick up from http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp Canvas 与 SVG 的比较 下表列出了 canvas ...
随机推荐
- docker安装,err:exit status 255,提示找不到虚拟机IP
我遇到这个问题是因为,BIOS没有打开虚拟化技术,导致虚拟机无法成功创建,自然找不到IP. 解决: 1.进入BIOS,高级选项卡下,找到虚拟化技术开关,打开即可.具体做法,可搜网文. 2.删除原来自动 ...
- 深度学习基础(四) Dropout_Improving neural networks by preventing co-adaptation of feature detectors
该笔记是我快速浏览论文后的记录,部分章节并没有仔细看,所以比较粗糙. 从摘要中可以得知,论文提出在每次训练时通过随机忽略一半的feature detectors(units)可以极大地降低过拟合.该方 ...
- 笔试中常用c++接口
1.stack:https://www.cnblogs.com/hdk1993/p/5809161.html 使用该容器时需要包含#include<stack>头文件: 定义stack对象 ...
- vue 点击图片放大
文档:https://www.npmjs.com/package/vue-directive-image-previewer [只能弹框查看 不能关闭和播放下一张,其他功能使用别的插件] 安装: np ...
- defaultdict(list)
- FPC全制造组装的流程介绍(转载)
[维文信FPC]FPC又称柔性电路板,FPC的PCBA组装焊接流程与硬性电路板的组装有很大的不同,因为FPC板子的硬度不够,较柔软,如果不使用专用载板,就无法完成固定和传输,也就无法完成印刷.贴片.过 ...
- Vue + webpack 项目实践
Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...
- php 解密小程序获取unionid
小程序代码 php代码 public function login2() { $post = input(); if (!empty($post)) { $appid = $this->wxap ...
- 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 ...
- Android Profiler内存检测
Memory Profiler是Android Profiler中的一个组件,Android Profiler是Android3.0用来替换之前Android Monitor的观察工具,主要用来观察内 ...