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. 2019.6.5 NOIP2014 day2 t2 寻找道路

    我竟然一个人敲了NOIP提高组的t2? 题目描述 在有向图 G 中,每条边的长度均为 1,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以下条件: 路径上的所有点的出边所指向的点都直 ...

  2. POJ 1485：Fast Food（dp）&& 面试题

    题目链接 题意 给出 n 个餐厅,m 个停车场,现在要将 n 个餐厅中的 m 个变成停车场,使得每个餐厅到最近的停车场的距离之和最短,输出哪个餐厅变成停车场和它服务哪些餐厅,还有最短距离之和. 思路 ...

  3. 基础数据类型，格式化输出，以及for循环的使用

    基础数据类型总览 int :数字类型,可以+-*/等等操作 str:字符串类型,存储少量的数据,+*int 切片等 bool :里面包含True,False这两种值,用来判断真假. list :列表 ...

  4. C++20 的 Modules

    最近看了两篇关于 C++ 20 Modules 很有意思的文章,戳: <Understanding C++ Modules: Part 1: Hello Modules, and Module ...

  5. 001_html基本结构

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 关于Keepalive的那些事

    服务端很多同学包括自己对keepalive理解不清晰,经常搞不清楚,TCP也有keepalive,HTTP也有keepalive,高可用也叫keepalive,经常混淆这几个概念.做下这几个概念的简述 ...

  7. MyBatis 一对多映射

    From<MyBatis从入门到精通> <!-- 6.1.2.1 collection集合的嵌套结果映射 和association类似,集合的嵌套结果映射就是指通过一次SQL查询将所 ...

  8. JAVA面试题 StringBuffer和StringBuilder的区别，从源码角度分析?

    面试官Q1:请问StringBuffer和StringBuilder有什么区别? 这是一个老生常谈的话题,笔者前几年每次面试都会被问到,作为基础面试题,被问到的概率百分之八九十.下面我们从面试需要答到 ...

  9. [剑指offer] 6. 旋转数组的最小数字

    题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋 ...

  10. [小米OJ] 2. 找出单独出现的数字

    解法一: map 1.45 ms #include <algorithm> #include <bitset> #include <cmath> #include ...