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 ...
随机推荐
- 深入浅出的webpack构建工具---AutoDllPlugin插件(八)
深入浅出的webpack构建工具---AutoDllPlugin插件(八) DllPlugin插件能够快速打包,能把第三方依赖的文件能提前进行预编译打包到一个文件里面去.提高了构建速度.因为很多第三方 ...
- 简单的CSS圆形缩放动画
简单的CSS圆形缩放动画 话不多说鼠标移动上去,看效果吧,效果预览 代码如下: <!DOCTYPE html> <html> <head> <title> ...
- IDEA Maven Jetty Jrebel 热部署
准备:1.下载Jrebel的离线安装包,版本是6.4.3版本. 2.下载Jrebel的破解补丁包,同样也是针对6.4.3版本的 Jrebel离线安装包官网下载地址:https:/ ...
- 异步方法(promise版)出错自调用
/** * [*promisePlus promise封装的异步,既然是异步,必然会成功或者失败,理论上失败了就失败了,但是 * 失败后能否让他过多长时间自动再调用自己呢,如果调用指定的次数还是失败, ...
- statefulSet 原理理解
1. svc(vip) -- deployment 2.headless(none) -- ...
- [01] AJAX
1.概述 AJAX,"Asynchronous JavaScript And XML"的简称,即"异步的JavaScript和XML".AJAX的作用在于页面中 ...
- (转)deb制作文件详解
转自:http://blog.chinaunix.net/uid-16184599-id-3041024.html 如何制作Deb包和相应的软件仓库,其实这个很简单.这里推荐使用dpkg来进行deb包 ...
- 关于 CSLA 服务器部署WCF访问出错的问题
MDAA项目 在以前的项目中,只要部署,从来没有发生过 通过WCF访问出错的问题,但是此次却出现如下问题: 2018-04-21 13:45:39,744 [119] ERROR Galaxy.OTC ...
- ES6 Promise 异步操作
最近越来越喜欢与大家进行资源分享了,并且及时的同步到自己的园子内,为什么呢? 一.小插曲(气氛搞起) 在上个月末,由于领导的高度重视(haha,这个高度是有多高呢,185就好了),走进了公司骨干员工的 ...
- Spring Boot 进行Bean Validate和Method Validate
SpringBoot在内部通过集成hibernate-validation 已经实现了JSR-349验证规范接口,在SpringBoot项目中只要直接使用就行了. 一般用在Controller中用于验 ...