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. HDU 2795：Billboard（线段树）

    http://acm.hdu.edu.cn/showproblem.php?pid=2795 Billboard Problem Description   At the entrance to th ...

  2. lleetcode 1 two sum c++

    Problem describe:https://leetcode.com/problems/two-sum/ Given an array of integers, return indices o ...

  3. 数据结构-双向链表（Python实现）

    数据结构在编程世界中一直是非常重要的一环,不管是开发还是算法,哪怕是单纯为了面试,数据结构都是必修课,今天我们介绍链表中的一种--双向链表的代码实现. 好了,话不多说直接上代码. 双向链表 首先,我们 ...

  4. 性能测试-实例讲解VU、RPS、RT公式换算

    概述 今天看到一篇文章讲解VU.RPS.RT,中间有一个公式如下图 并发数 = RPS * 响应时间  于是我在本地做了几次实验,试图验证一下公式的准确性 实验网站 www.baidu.com 第一次 ...

  5. Python 为什么要继承 object 类？

    自己搬运自己在知乎上的回答,感觉破乎吃枣药丸,哪天挂了这里就是个备份. 链接:https://www.zhihu.com/question/19754936/answer/229327803 2017 ...

  6. c# HttpWebResponse 各种情况下 获取StatusCode状态码

    捕捉网页出现404.500等会直接抛出WebException异常 异常代码: (HttpWebResponse)req.GetResponse(); 当执行这段代码出现异常 解决问题 那如果我们想获 ...

  7. spring全局异常抓取validation校验信息

    @ControllerAdvicepublic class GlobalExceptionHandler { @ExceptionHandler({Exception.class}) @Respons ...

  8. C#4.0新增功能02 命名实参和可选实参

    连载目录    [已更新最新开发文章,点击查看详细] C# 4 介绍命名实参和可选实参. 通过命名实参,你可以为特定形参指定实参,方法是将实参与该形参的名称关联,而不是与形参在形参列表中的位置关联.  ...

  9. 2019暑假集训 BLO

    题目描述 Byteotia城市有n个 towns m条双向roads. 每条 road 连接 两个不同的 towns ,没有重复的road. 所有towns连通. 输入 输入n<=100000 ...

  10. Java面试题-基础篇三（干货）

    这些JAVA基础题确定都会了吗? 31.String s = new String("xyz");创建了几个StringObject?是否可以继承String类? 两个或一个都有可 ...