SVG和canvas渲染的性能比较
1.什么是SVG？
描述：
- 一种使用XML描述的2D图形的语言
- SVG基于XML意味着，SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。
- 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
2.什么是canvas？
描述：
- 通过Javascript来绘制2D图形。
- 是逐像素进行渲染的。
- 其位置发生改变，会重新进行绘制。
3.什么是WebGL 3D？
- 说白了就是基于Canvas的3D框架
- 主要用来做 3D 展示、动画、游戏。
因为前两项都是描述2D图形的，而WebGL是描述3d的，所以以下针对SVG和Canvas做比较。
3.有了Canvas为什么还要使用SVG
最重要的一点是SVG不依赖于终端设备的像素，可以随意放大缩小但是不会失真
继续：为什么SVG放大不会失真而Canvas却会变模糊呢？
因为SVG的渲染的原理是通过对图形的数学描述来绘图的，例如：以下哆啦A梦的头型的思路是，我先画一个贝塞尔函数，然后填充颜色。
而Canvas的渲染原理是通过对每个像素颜色的填充，最后组成图形，例如：以下马里奥的帽子我们可以看出，其实帽子的形状是由一个个像素填充出来的。
另外Canvas渲染出来的图叫位图,SVG渲染出来的图叫矢量图
看到这里你肯定会觉得那直接所有图形都用SVG画不就行了，位图就可以直接淘汰了呀，但是SVG画的图也有缺点，以下针对两者的不同做一个对比。
4.两者的对比
理解适用场景：
从以下这张微软开发社区公布的性能图中也可以看出，SVG在绘图面积较大，数据量较小的时候性能较好，渲染时间较短，而Canvas刚好相反。
5.总结
Canvas和SVG两者的适用场景不同，开发者在使用是应根据具体的项目需求来选择相应的渲染方式。
最后附上一个SVG编译器帮大家更好的理解和使用SVG
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SVG 编辑器</title>
<style>
#toolbox {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 250px;
border-right: 1px solid #CCC;
} #toolbox h2 {
margin: 0;
padding: 0;
background: #EEE;
font-size: 16px;
height: 24px;
line-height: 24px;
padding: 5px 10px;
} #toolbox form {
padding: 10px;
} #canvas {
position: absolute;
left: 260px;
top: 10px;
bottom: 10px;
right: 10px;
box-shadow: 2px 2px 10px rgba(0,0,0,.4);
border-radius: 5px;
} label {
display: inline-block;
width: 80px;
text-align: right;
}
</style>
</head>
<body>
<div id="toolbox">
<h2>创建</h2>
<form id="create-shape">
<button type="button" create="rect">Rect</button>
<button type="button" create="circle">Circle</button>
<button type="button" create="ellipse">Ellipse</button>
<button type="button" create="line">Line</button>
</form>
<h2>形状</h2>
<form id="shape-attrs">
请先创建图形
</form>
<h2>外观和变换</h2>
<form id="look-and-transform" disabled="disabled">
<p>
<label style="display: inline;">填充</label>
<input id="fill" type="color" value="#ffffff" />
</p>
<p>
<label style="display: inline;">描边</label>
<input id="stroke" type="color" value="#ff0000" />
<input id="strokeWidth" type="range" value="1" />
</p>
<p>
<label>translateX</label>
<input id="translateX" type="range" min="-400" max="400" value="0" /> <label>translateY</label>
<input id="translateY" type="range" min="-400" max="400" value="0" /> <label>rotate</label>
<input id="rotate" type="range" min="-180" max="180" value="0" /> <label>scale</label>
<input id="scale" type="range" min="-1" max="2" step="0.01" value="1" />
</p>
</form>
</div>
<div id="canvas"></div>
</body>
<script>
var SVG_NS = 'http://www.w3.org/2000/svg'; // 图形及对应默认属性
var shapeInfo = {
rect: 'x:10,y:10,width:200,height:100,rx:0,ry:0',
circle: 'cx:200,cy:200,r:50',
ellipse: 'cx:200,cy:200,rx:80,ry:30',
line: 'x1:10,y1:10,x2:100,y2:100'
}; // 默认公共属性
var defaultAttrs = {
fill: '#ffffff',
stroke: '#ff0000'
}; var createForm = document.getElementById('create-shape');
var attrForm = document.getElementById('shape-attrs');
var lookForm = document.getElementById('look-and-transform'); var svg = createSVG();
var selected = null; createForm.addEventListener('click', function(e) {
if (e.target.tagName.toLowerCase() == 'button') {
create(e.target.getAttribute('create'));
}
}); attrForm.addEventListener('input', function(e) {
if (e.target.tagName.toLowerCase() != 'input') return;
var handle = e.target;
selected.setAttribute(handle.name, handle.value);
}); lookForm.addEventListener('input', function(e) {
if (e.target.tagName.toLowerCase() != 'input') return;
if (!selected) return;
selected.setAttribute('fill', fill.value);
selected.setAttribute('stroke', stroke.value);
selected.setAttribute('stroke-width', strokeWidth.value);
selected.setAttribute('transform', encodeTranform({
tx: translateX.value,
ty: translateY.value,
scale: scale.value,
rotate: rotate.value
}));
}); function createSVG() {
var svg = document.createElementNS(SVG_NS, 'svg');
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');
canvas.appendChild(svg); svg.addEventListener('click', function(e) {
if (e.target.tagName.toLowerCase() in shapeInfo) {
select(e.target);
}
});
return svg;
} function create(name) {
var shape = document.createElementNS(SVG_NS, name);
svg.appendChild(shape);
select(shape);
} function select(shape) {
var attrs = shapeInfo[shape.tagName].split(',');
var attr, name, value; attrForm.innerHTML = ""; while(attrs.length) {
attr = attrs.shift().split(':');
name = attr[0];
value = shape.getAttribute(name) || attr[1];
createHandle(shape, name, value);
shape.setAttribute(name, value);
} for (name in defaultAttrs) {
value = shape.getAttribute(name) || defaultAttrs[name];
shape.setAttribute(name, value);
}
selected = shape; updateLookHandle();
} function createHandle(shape, name, value) { var label = document.createElement('label');
label.textContent = name; var handle = document.createElement('input');
handle.setAttribute('name', name);
handle.setAttribute('type', 'range');
handle.setAttribute('value', value);
handle.setAttribute('min', 0);
handle.setAttribute('max', 800); attrForm.appendChild(label);
attrForm.appendChild(handle);
} function updateLookHandle() {
fill.value = selected.getAttribute('fill');
stroke.value = selected.getAttribute('stroke');
var t = decodeTransform(selected.getAttribute('transform'));
translateX.value = t ? t.tx : 0;
translateY.value = t ? t.ty : 0;
rotate.value = t ? t.rotate : 0;
scale.value = t ? t.scale : 1;
} function decodeTransform(transString) {
var match = /translate\((\d+),(\d+)\)\srotate\((\d+)\)\sscale\((\d+)\)/.exec(transString);
return match ? {
tx: +match[1],
ty: +match[2],
rotate: +match[3],
scale: +match[4]
} : null;
} function encodeTranform(transObject) {
return ['translate(', transObject.tx, ',', transObject.ty, ') ',
'rotate(', transObject.rotate, ') ',
'scale(', transObject.scale, ')'].join('');
} </script>
</html>
SVG和canvas渲染的性能比较的更多相关文章
- Seen.js – 使用 SVG 或者 Canvas 渲染 3D 场景
Seen.js 渲染3D场景为 SVG 或者 HTML5 画布.Seen.js 包含对于 SVG 和 HTML5 Canvas 元素的图形功能的最简单的抽象.所有这个库的其它组件都是不用关心将要渲染的 ...
- SVG 与 Canvas 对比
SVG 与 Canvas 对比 技术选型 SVG vs Canvas 应用场景 性能 GPU 加速 XML 数据存储 Canvas 2D Canvas 3D WebGL / OpenGL ES thr ...
- 前端图形:SVG与Canvas
00.前端图形 前端代码实现图形的几种方式:CSS.SVG.Canvas(主要是JavaScript编码) CSS也是可以画图的,需要借助于高宽.边框border.clip-path裁剪.渐变色背景等 ...
- SVG 2D入门13 - svg对决canvas
到目前为止,SVG与Canvas的主要特性均已经总结完毕了.它们都是HTML5中支持的2D图形展示技术,而且均支持向量图形.现在,我们就来比对一下这两种技术,分析一下它们的长处和适用场景.首先分析一下 ...
- SVG 与 Canvas：如何选择
SVG 与 Canvas:如何选择 61(共 69)对本文的评价是有帮助 - 评价此主题 本主题一开始将对 SVG 与 Canvas 进行简要比较,接下来会讨论大量的比较代码示例,如光线跟踪和绿屏 ...
- HTML5（三）SVG vs. Canvas
HTML5 内联 SVG 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 ...
- 三天学会HTML5——SVG和Canvas的使用
在第一天学习了HTML5的一些非常重要的基本知识,今天将进行更深层学习 首先来回顾第一天学习的内容,第一天学习了新标签,新控件,验证功能,应用缓存等内容. 第2天将学习如何使用Canvas 和使用SV ...
- html5 中的SVG 和canvas
想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...
- 环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）
缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...
随机推荐
- STM32学习的一些实例
第一讲:修炼STM32之乾坤大挪移术—— 如何用DMA神器搬运数据DMA,即直接存储器访问.DMA 传输方式无需 CPU 直接控制传输,通过硬件为 RAM 与 I/O 设备开辟一条直接传送数据的通路, ...
- 仿照Spring自己实现有各种通知的AOP，AOP实现的步骤分解
一.需求: 仿照Spring的AOP写的 MyAOP 2.0,有环绕通知.前置通知.后置通知.返回通知.异常通知等. 已实现:①通过动态代理+通知的注解类,实现了前置通知.后置通知等各种通知:②切点( ...
- 你必须知道的Docker镜像仓库的搭建
近期工作中发现用到的容器镜像越来越多(不多的时候没考虑过镜像仓库的问题),同一个容器镜像也存在多个版本,那么镜像仓库的搭建需求就涌现出来,本文就目前的几个常用镜像仓库的搭建进行介绍,我们可以根据需要选 ...
- 一台服务器通过nginx配置多个域名（80端口）
1. 问题描述 多个域名对应一个服务器,为了避免域名后增加端口号,两个域名都需要占用80端口号,使用nginx来进行配置. 2. 解决方案 目前项目中,线上正在使用(100%可用)多域名对应一个服务器 ...
- 学习2：内容# 1.while # 2.字符串格式化 # 3.运算符 # 4.编码初始
目录 1.while循环 2.字符串格式化 3.运算符 4.编码初始 1.while循环 while -- 关键字 (死循环) if 条件: 结果 while 条件: 循环体 while True: ...
- 浅谈tomcat 、apache、 nginx的区别及优缺点
(~~排版垃圾~~,此文纪念自己18年6月所作为,如有不适合之处,请告知.) 本文主要说明tomcat .apache. nginx的定义.区别及优缺点 一. 定义: 1. Apache Apache ...
- thread学习笔记--BackgroundWorker 类
背景: 在 WinForms 中,有时要执行耗时的操作,比如统计某个磁盘分区的文件夹或者文件数目,如果分区很大或者文件过多的话,处理不好就会造成“假死”的情况,或者报“线程间操作无效”的异常,或者在该 ...
- Mysql常用语法及入门开篇（一）
数据:信息,记录.阅读: 数据库:数据的仓库,存储许多的数据(信息).按照数据结构来组件.存储和管理数据的,建立在计算机存储设备上的仓库. DBMS: database management Sy ...
- 我这边测了一下，发现#后面参数变化浏览器不会刷新，但是#一旦去掉就会刷新了，你那边的url拼的时候能不能在没参数的时候#也拼在里面，这样应该就OK了
我这边测了一下,发现#后面参数变化浏览器不会刷新,但是#一旦去掉就会刷新了,你那边的url拼的时候能不能在没参数的时候#也拼在里面,这样应该就OK了
- c语言进阶9-值传递与地址传递
一. 函数的值传递 函数的值传递是指参数为基本类型时,如整型.浮点型.字符型(特指单字符型)时,参数传递时是从实参拷贝一份值传给形参,形参的变化不会影响实参的值. 1. 基本类型做参数 ...