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. JS高级程序设计第2章--精简版

    前言:这次是二刷了,想暑假做一次完整的笔记,但用本子来写笔记的话太贵了,可能哪天还丢了..所以还是博客好== 第二章:在HTML中使用JavaScript 2.1 <script>元素: ...

  2. 认识Mybatis的一二级缓存

    认识Mybatis的一二级缓存 一次完整的数据库请求,首先根据配置文件生成SqlSessionFactory,再通过SqlSessionFactory开启一次SqlSession,在每一个SqlSes ...

  3. 未能加载文件或程序集“Seagull.BarTender.Print, Version=11.0.8.1, Culture=neutral, PublicKeyToken=109ff779a1b4cbc7

    这2天项目上需要使用BarTender打印软件,使用BarTender的库的时候时候发现一个特别的问题: 未能加载文件或程序集“Seagull.BarTender.Print, Version=11. ...

  4. Maven发布项目到Nexus私服中 (发布jar包)

    目录 1 需求说明 2 实现步骤 2.1 Maven服务的setting.xml文件 2.2 项目的pom.xml文件 2.3 发布项目 1 需求说明 开发完项目后, 将项目版本发布到Nexus私服中 ...

  5. scrapy基础知识之 处理Redis里的数据：

    数据爬回来了,但是放在Redis里没有处理.之前我们配置文件里面没有定制自己的ITEM_PIPELINES,而是使用了RedisPipeline,所以现在这些数据都被保存在redis的xx:items ...

  6. 初识Grep

    前言:grep这个命令都不陌生,最常用的就是和管道符结合,例如:ps -ef | grep docker,但是我还是想认识一下这个非常giao的命令... Grep称为全局正则表达式检索工具,在企业中 ...

  7. 数据结构-堆栈和队列最简单的实现（Python实现）

    OK,上篇博客我们介绍了双向链表以及代码实现,这篇文章我们来学习堆栈和队列. 队.栈和链表一样,在数据结构中非常基础一种数据结构,同样他们也有各种各样.五花八门的变形和实现方式.但不管他们形式上怎么变 ...

  8. Bzoj 2318 Spoj4060 game with probability Problem

    2318: Spoj4060 game with probability Problem Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 524  Sol ...

  9. 1.jdk1.7到jdk1.8 Map发生了什么变化(底层)?

    1.8之后hashMap的数据结构发生了变化,从之前的单纯的数组+链表结构变成数组+链表+红黑树.也就是说在JVM存储hashMap的K-V时仅仅通过key来决定每一个entry的存储槽位(Node[ ...

  10. 利用openpyxl模块处理excel表格

    一.选取表格中的内容创建图表 1.openpyxl支持利用工作表中单元格的数据,创建条形图.折线图.散点图等.步骤如下: 1).从一个矩形区域选择的单元格,创建一个Reference对象. 2).通过 ...