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渲染的性能比较的更多相关文章

  1. Seen.js – 使用 SVG 或者 Canvas 渲染 3D 场景

    Seen.js 渲染3D场景为 SVG 或者 HTML5 画布.Seen.js 包含对于 SVG 和 HTML5 Canvas 元素的图形功能的最简单的抽象.所有这个库的其它组件都是不用关心将要渲染的 ...

  2. SVG 与 Canvas 对比

    SVG 与 Canvas 对比 技术选型 SVG vs Canvas 应用场景 性能 GPU 加速 XML 数据存储 Canvas 2D Canvas 3D WebGL / OpenGL ES thr ...

  3. 前端图形:SVG与Canvas

    00.前端图形 前端代码实现图形的几种方式:CSS.SVG.Canvas(主要是JavaScript编码) CSS也是可以画图的,需要借助于高宽.边框border.clip-path裁剪.渐变色背景等 ...

  4. SVG 2D入门13 - svg对决canvas

    到目前为止,SVG与Canvas的主要特性均已经总结完毕了.它们都是HTML5中支持的2D图形展示技术,而且均支持向量图形.现在,我们就来比对一下这两种技术,分析一下它们的长处和适用场景.首先分析一下 ...

  5. SVG 与 Canvas：如何选择

    SVG 与 Canvas:如何选择 61(共 69)对本文的评价是有帮助 - 评价此主题   本主题一开始将对 SVG 与 Canvas 进行简要比较,接下来会讨论大量的比较代码示例,如光线跟踪和绿屏 ...

  6. HTML5（三）SVG vs. Canvas

    HTML5 内联 SVG 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 ...

  7. 三天学会HTML5——SVG和Canvas的使用

    在第一天学习了HTML5的一些非常重要的基本知识,今天将进行更深层学习 首先来回顾第一天学习的内容,第一天学习了新标签,新控件,验证功能,应用缓存等内容. 第2天将学习如何使用Canvas 和使用SV ...

  8. html5 中的SVG 和canvas

    想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...

  9. 环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）

    缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...

随机推荐

  1. 分布式个人理解概述和dubbo实现简述

    什么是分布式?为什么使用分布式? 个人有一些浅薄的理解希望可以批评指正,从概念和应用 两个方面概述:      一.概念:分布式也叫分布式服务,也就是说 他是 一种面向服务思想的程序设计和架构风格,典 ...

  2. 分布式理论基础（四）Paxos

    1 背景 分布式理论基础(一)一致性及解决一致性的两种方式:2PC和3PC 中介绍了一致性,Paxos协议在节点宕机恢复.消息无序或丢失.网络分化的场景下能保证决议的一致性,是被讨论最广泛的一致性协议 ...

  3. HDU 1565：方格取数(1)（最大点权独立集）***

    http://acm.hdu.edu.cn/showproblem.php?pid=1565 题意:中文. 思路:一个棋盘,要使得相邻的点不能同时选,问最大和是多少,这个问题就是最大点权独立集. 可以 ...

  4. python网络爬虫（11）近期电影票房或热度信息爬取

    目标意义 为了理解动态网站中一些数据如何获取,做一个简单的分析. 说明 思路,原始代码来源于:https://book.douban.com/subject/27061630/. 构造-下载器 构造分 ...

  5. 你懂什么叫js继承吗

    说到继承呢?肯定有很多做java的朋友都觉得是一个比较简单的东西了.毕竟面向对象的三大特征就是:封装.继承和多态嘛.但是真正对于一个javascript开发人员来说,很多时候其实你使用了继承,但其实你 ...

  6. 和朱晔一起复习Java并发（四）：Atomic

    本节我们来研究下并发包中的Atomic类型. AtomicXXX和XXXAdder以及XXXAccumulator性能测试 先来一把性能测试,对比一下AtomicLong(1.5出来的).LongAd ...

  7. 第一届合天杯河北科技大学网络安全技术大赛 web6 writeup

  8. C语言入门2-程序设计的灵魂—算法及Raptor的应用

    一.     什么是算法(5个特性) 算法就是   解决问题的方法和步骤. 算法为解决一个具体问题而采取的确定的  有限的 执行步骤  ,仅指  计算机   能执行的算法. 算法是程序设计的灵魂和核心 ...

  9. Python常用的标准库以及第三方库

    Python常用的标准库以及第三方库有哪些?   20个必不可少的Python库也是基本的第三方库 读者您好.今天我将介绍20个属于我常用工具的Python库,我相信你看完之后也会觉得离不开它们.他们 ...

  10. codewars[7]-python Friend or Foe?

    list中保留四字母的,然后return. 解 def friend(x): i = len(x) ii = [] a = 0 while a < i: if len(x[a]) == 4: i ...