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. 关于svn服务部署方案

    本文只记录我的笔记 首先, 我是个懒人, 写好了shell, 直接上传把 安装包:SvnPackages-chenglee 第一, 无非就是搞掂依赖这一块 #********************* ...

  2. 基于modelform和ajax的注册

    forms文件 创建ModelForm组件 from django import forms from crm import models from django.core.exceptions im ...

  3. Requests方法 -- 项目实现自动发送邮件

    """1.discover方法里面有三个参数:-case_dir:这个是待执行用例的目录.-pattern:这个是匹配脚本名称的规则,test*.py意思是匹配test开 ...

  4. 如何取得Spring管理的bean

    本文主要讲3中实现方式,请用第3种方法(通用) 1.servlet方式加载时配置如下 <servlet> <servlet-name>springMVC</servlet ...

  5. 嗨，你真的懂this吗？

    this关键字是JavaScript中最复杂的机制之一,是一个特别的关键字,被自动定义在所有函数的作用域中,但是相信很多JvaScript开发者并不是非常清楚它究竟指向的是什么.听说你很懂this,是 ...

  6. SpringCloud-Alibaba-Sentinel(1)初探

    Sentinel 是什么? Sentinel 具有以下特征: 丰富的应用场景:Sentinel 承接了阿里巴巴近 10 年的双十一大促流量的核心场景,例如秒杀(即突发流量控制在系统容量可以承受的范围) ...

  7. excel报表开发-- 根据datatable个数自动生成新sheet

    总结一下很久之前做的报表小程序,今日有问题又调试了一下. DB中存在一个表,记录了ID<自增长>,SqlStatement<sql查询语句>及其他必要字段,比如SheetNam ...

  8. 【并查集】模板 + 【HDU 1213、HDU 1232、POJ 2236、POJ 1703】例题详解

    不想看模板,想直接看题目的请戳下面目录: 目录: HDU 1213 How Many Tables[传送门] HDU 1232 畅通工程 [传送门] POJ 2236 Wireless Network ...

  9. CentOS 7离线安装Ansible

    前言 我一直都想成为自动化运维界最亮的仔,奈何自己实力不允许.不过,我一直都在奋斗的路上:这不,最近就在学习自动化运维界的神器--Ansible. 要系统的学习一下Ansible,那就是要先搭建学习环 ...

  10. 题解 P5367 【【模板】康托展开】

    P5367 [模板]康托展开 感觉这题难度大概在绿题到蓝题之间qwq 一.洛谷日报[yummy]浅谈康托展开 如我想知道321是{1,2,3}中第几个小的数可以这样考虑 : 第一位是3,当第一位的数小 ...