Html5新增元素中Canvas 与内联SVG的比较!
SVG与Canvas的区别与比较如下:
svg:使用xml描述2D图形,canvas使用javascript描述2D图形。
Canvas 是逐像素进行渲染的,在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
svg基于xml,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
Canvas SVG
<canvas> 标签定义图形,比如图表和其他图像,但必须使用脚本(通常是JavaScript)来绘制图形。 使用 XML 格式定义图形,用于定义用于网络的基于矢量的图形,图像在放大或改变尺寸的情况下其图形质量不会有损失.
依赖分辨率 不依赖分辨率
不支持事件处理器 支持事件处理器
弱的文本渲染能力 最适合带有大型渲染区域的应用程序(比如谷歌地图)
能够以 .png 或 .jpg 格式保存结果图像 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
适合用于图像密集型的游戏,其中的许多对象会被频繁重绘 不适合游戏应用
本文在撰写中参考过以下以下网站的资料:
http://www.runoob.com/html/html5-svg.html
Html5新增元素中Canvas 与内联SVG的比较!的更多相关文章
- HTML5 Canvas、内联 SVG、Canvas vs. SVG
canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...
- 【转】HTML5新增元素兼容旧浏览器方法
ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...
- HTML5 学习03——内联 SVG
什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺 ...
- HTML5: HTML5 内联 SVG
ylbtech-HTML5: HTML5 内联 SVG 1.返回顶部 1. HTML5 内联 SVG HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Ve ...
- HTML5新增核心工具——canvas
原文:HTML5新增核心工具--canvas Canvas元素称得上是HTML5的核心所在,它是一个依靠JavaScript绘制华丽图像的元素. Canvas由一个可绘制地区HTML代码中的属性定义决 ...
- 小强的HTML5移动开发之路(17)——HTML5内联SVG
来自:http://blog.csdn.net/dawanganban/article/details/18189181 一.什么是SVG 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集) ...
- HTML5学习笔记3 内联SVG
HTML5支持内联SVG 下面来介绍一下什么是SVG SVG可缩放矢量图形 可缩放矢量是基于可扩展标记语言(标准通用语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准 ...
- HTML5 新增元素梳理
HTML5新增元素如下图: <canvas> 新元素 <canvas> 标签定义图形,比如图表和其他图像,该标签基于javascript的绘图api 新多媒体元素 <au ...
- Access中多表内联的SQL写法
在Access中多表内联,可以使用传统的where条件逐行筛选,如: SELECT SNAME,CNAME,DEGREE FROM STUDENT,COURSE,SCORE where student ...
随机推荐
- C#基础 base与this关键字
base和this在C#中被归于访问关键字,顾名思义,就是用于实现继承机制的访问操作来满足对对象成员的访问,从而为多态机制提供更加灵活的处理方式. this是指当前对象本身,而base则是在继承类中访 ...
- 20155232 2016-2017-3 《Java程序设计》第3周学习总结
20155232 2016-2017-3 <Java程序设计>第3周学习总结 教材学习内容总结 第四章 认识对象 1.对象(Object):存在的具体实体,具有明确的状态和行为. 2.类( ...
- 成都优步uber司机客户端下载-支持安卓、IOS系统、优步司机端Uberpartner
国外打车软件优步乘客端大家在手机应用商店里都可以下载到,但是优步司机的App却不好找下载地址:这就跟滴滴打车一样,滴滴的乘客端是滴滴打车,而司机端是滴滴专车,司机版本在应用商店里都找不到,原因不清楚. ...
- RHCSA-day3
10.配置LDAP客户端 在classroom.example.com上已经部署了一台LDAP认证服务器,按以下要求将你的系统加入到该LDAP服务中,并使用Kerberos认证用户密码: 该LDAP认 ...
- 单元测试或main方法 进行单元测试时 idea检查其他类的语法是否正确的去除方法
在进行单元测试或者main方法时,在 运行/调试 设置中设置想要使用的测试单位的 before launch 即可
- L018-crond的生产场景经验小节
L018-crond的生产场景经验小节 怎么说呢,其实L018这节课还是巩固crond的知识,前半堂课主要是解决上堂课老师留的作业(在L017已经更新,拉到最后),然后剩下的半堂客主要是讲解了一些生产 ...
- 【转】查看mysql表结构和表创建语句的方法
转自:http://blog.csdn.net/business122/article/details/7531291 查看mysql表结构的方法有三种: 1.desc tablename; 例如: ...
- Viper--方便好用的Golang 配置库
前言 本文主要是为读者介绍一个轻便好用的Golang配置库viper 正文 viper 的功能 viper 支持以下功能: 1. 支持Yaml.Json. TOML.HCL 等格式的配置 ...
- 简述AQS原理
这是一道面试题:简述AQS原理 AQS核心思想是,如果被请求的共享资源空闲,则将当前请求资源的线程设置为有效的工作线程,并且将共享资源设置为锁定状态.如果被请求的共享资源被占用,那么就需要一套线程阻塞 ...
- DOM---文档对象模型(Document Object Model)的基本使用
一.DOM简介 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口.它是一种与平台和语言无关的应用程序接口(API),它可以动态 ...