html5 画布和SVG的差别
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的差别的更多相关文章
- html5 中的SVG 和canvas
想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...
- HTML5中的SVG
* SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...
- HTML5画布(CANVAS)速查简表
HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/
- HTML5画布生成的3D飞船舰队效果
在线演示 本地下载 使用HTML5画布2D来模拟3D的空间效果,生成舰队飞行效果,了解如何开发,请阅读下面代码相关“轻视频”: HTML5画布模拟生成3D的舰队飞行效果
- 使用HTML5画布(canvas)生成阴影效果
来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...
- html5 Canvas和SVG的区别是什么(总结)
html5 Canvas和SVG的区别是什么(总结) 一.总结 一句话总结:都是2D做图,svg是矢量图,canvas是位图.Canvas 是逐像素进行渲染的,适合游戏. 1.svg的全称是什么? S ...
- HTML5: HTML5 内联 SVG
ylbtech-HTML5: HTML5 内联 SVG 1.返回顶部 1. HTML5 内联 SVG HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Ve ...
- html5中画布和SVG的比较
SVG是基于XML的图形语言,在DOM解析中其每个元素都是可以用的,这样就可以为SCG元素附加JavaScript事件处理器,实现更加丰富的效果. 在SVG中,每个被绘制的图形均被视为对象,如果SVG ...
- HTML5学习之画布和SVG(四)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
随机推荐
- 搭建C++环境
因为测试用例是C++,我必须安装对应的C++环境,否则跑不起C++代码.突然觉得VsCode如此操蛋,觉得为什么就不能像Eclipse中的Maven那样,安装插件就集成了Maven所必需的,省了安装这 ...
- JavaScript高级程序设计学习(四)之引用类型
在javascript中也是有引用类型的,java同样如此. javascript常见也比较常用的引用类型就熟Object和Array. 一个对象和一个数组,这个在前后端分离开发中也用的最多.比如aj ...
- [转]系统架构演变--集中式架构-垂直拆分-分布式服务-SOA(服务治理)-微服务
一.系统架构演变 1.1. 集中式架构 当网站流量很小时,只需一个应用,将所有功能都部署在一起,以减少部署节点和成本.此时,用于简化增删改查工作量的数据访问框架(ORM)是影响项目开发的关键. 存在的 ...
- CommonJS, AMD, CMD是什么及区别--简单易懂有实例
CommonJS, AMD, CMD都是JS模块化的规范. CommonJS是服务器端js模块化的规范,NodeJS是这种规范的实现. AMD(异步模块定义)和CMD(通用模块定义)都是浏览器端js模 ...
- tcp为什么是三次握手
刷知乎看到的,很可爱啊哈哈哈就顺手黏贴过来了 作者:大闲人柴毛毛链接:https://www.zhihu.com/question/24853633/answer/254224088来源:知乎著作权归 ...
- c语言第三例
标准的输入输出函数: putchar(输出字符) getchar(获取输入字符) printf(格式输出) scanf(格式输入) puts(输出字符串) gets(获取输入字符串) #include ...
- FlashWindowEx实现窗口在任务栏闪烁/变化颜色
原文:FlashWindowEx实现窗口在任务栏闪烁/变化颜色 效果类似QQ收到新的会话消息任务栏颜色变化 附2小段代码: [System.Runtime.InteropServices.DllImp ...
- Luogu P1129 [ZJOI2007]矩阵游戏
题目意思还是比较直观的,而且这个建模的套路也很明显. 我们首先考虑从主对角线可以转移到哪些状态. 由于每一次操作都不会把同一行(列)的黑色方块分开.因此我们发现: 只要找出\(n\)个黑色棋子,让它们 ...
- windows服务中对外提供API接口
public class SendMqService { private static bool isExcute = true; private static HttpListener listen ...
- 谈谈css伪类与伪元素
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus.:hover以及<a>标签的:link.:visited等,伪元素较常见的比如:before.:after等. ...