三种图表技术SVG、Canvas、WebGL 3D比较

最新推荐文章于 2024-09-15 08:13:02 发布
最新推荐文章于 2024-09-15 08:13:02 发布
阅读量882 收藏 2
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/liutianzeng/p/11322009.html
版权

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>
View Code

 

 

转载于:https://www.cnblogs.com/liutianzeng/p/11322009.html

a5199421
关注
内卷年代，是该学学WebGL了
xxxzzzqqq_的博客
03-10 377
通过简单的webgl入门，已经有了初步的认知，大致的流程为：着色器初始化 -> 着色器程序对象 -> 控制变量 -> 绘制，为了更好的性能，后面会使用缓冲区来解决重复渲染的问题，这样我们的顶点不会一个一个设置而直接会被缓存，包括后面一些动态效果会涉及到矩阵的转换，如平移、缩放、旋转、复合矩阵。
前端图形:SVG与Canvas
「 虚幻私塾」
10-21 802
可缩放矢量图形（Scalable Vector Graphics，SVG），是一种基于 XML（数学）描述的二维的矢量图形，内容可以直接插入网页，成为DOM的一部分，然后用 JavaScript 和 CSS 进行操作。这里就先简单了解一下，WebGL是运行在GPU上的，可面向底层显卡编程，可调用底层的接口，实现硬件加速，在2D图形绘制上性能会优于Canvas2D。大多数现代浏览器都支持SVG 图形，越来越多的项目在使用SVG图形，简单的像图标，复杂的一些图表Chart也有不少是基于SVG实现的。
基于WebGL实现的3D曲面图表组件
08-10
基于 WebGL 实现的 3D 曲面图表组件
canvas SVG webGL比较
u010513603的博客
05-17 6760
https://blog.csdn.net/olevin/article/details/512964701canvasHTML5 canvas也有相应的JS库。我用过并感觉不错的有如下一些：flot, 我第一个使用的canvas库。基于jquery，支持有限的视觉形式（折线、条形、面积、点）和缩放等动画效果，简单易用。RGraph，我第二个使用的canvas库。有优秀的动画效果，特点是有大量的传...
探索3D世界：SVG3D——Python中的轻量级3D线框生成库
最新发布
gitblog_00580的博客
09-15 818
探索3D世界：SVG3D——Python中的轻量级3D线框生成库 svg3d generate 3D wireframes as vector art 项目地址: https://gitcode.com/gh_mirrors/sv...
基于HTML5 Canvas的3D动态Chart图表
HT for Web 3D
11-01 3508
发现现在工业SCADA上或者电信网管方面用图表的特别多，虽然绝大部分人在图表制作方面用的是echarts，他确实好用，但是有些时候我们不能调用别的插件，这个时候就得自己写这些美丽的图表了，然而图表轻易做不成美丽的。。。看到有一个网站上在卖的图表，感觉挺好看的，就用 HT for Web 3D 实现了一个 3d 的图表~
【性能篇】28 # Canvas、SVG与WebGL在性能上的优势与劣势
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
12-19 4405
【跟月影学可视化】学习笔记。在浏览器上渲染动画，每一秒钟最高达到 60 帧左右。1 秒钟内完成 60 次图像的绘制，那么完成一次图像绘制的时间就是 1000/60（1 秒 =1000 毫秒），约等于 16 毫秒。达到比较流畅的动画效果的最低帧率是 24fps，相当于图形系统要在大约 42 毫秒内完成一帧图像的绘制。影响 Canvas 渲染性能的 2 大要素：Google Chrome浏览器怎么开启查看帧率功能？测试例子： 在 Canvas 上每一帧绘制 个半径为 的小圆：在 Canvas 上每一帧绘制
svg 图表应用测试（部分代码实现， 备忘）
金秋送爽
12-16 170
  &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;svg&lt;/title&gt; &lt;meta http-equiv="content-type" content="text
【前端素材】模板-多种实用图表可视化（echarts，svg,css.zip
04-04
WebGL 动画：基于 WebGL（Web图形库）的 3D 图形渲染技术，可以实现高性能的复杂动画效果，适合开发需要展示 3D 动画的网页。 React 动画库：如果你在使用 React 框架，可以考虑使用像 React Spring、Framer Motion...
基于html5开发的canvas图表案例.zip
02-13
尽管Canvas更适合动态和交互式的图形，但它也可以配合其他技术，如SVG（Scalable Vector Graphics）和WebGL（一种3D图形API）来实现更复杂的视觉效果。 在实际应用中，Canvas图表常用于数据仪表板、实时监控系统、...
HTML5 Canvas核心技术.pdf
04-10
虽然这不是本书的主要内容，但读者也将接触到WebGL——一种在Canvas上绘制3D图形的JavaScript API。WebGL基于OpenGL ES，它允许开发者直接在浏览器中操作GPU，实现复杂图形的渲染和动画效果。 在描述中提到的读者...
html5 svg交互式3D商场地图特效特效代码
03-20
html5 svg交互式3D商场地图特效是一款功能强大的3D交互式商场地图代码。
SVG表现3D图形
热门推荐
firefight的专栏
09-12 1万+
 基本上Svg是用来表示2D图形的，但也不是不可以表示3D图形。 首先是3D图形位置的处理，我们需要为3D图形建立3D坐标系，并实现3D坐标变换，包括平移，旋转等，具体的实现方法有欧拉法，旋转矩阵法和四元数法等。根据3D模型的顶点坐标，可以实现3D图形在位置上的的显示。由于ADOBE SVG VIEWER提供了丰富的坐标变换函数，包括平移变换（translate）, 旋转变换（rota
WEBGL+SVG
kobekobecheng的博客
06-26 635
WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插...
Canvas和SVG性能对比
qq_41191401的博客
12-29 4282
在dom元素不多的情况下建议使用SVG
WebGL、canvas、svg
好好学习天天向上
09-01 1497
webGL是一种帮助我们开发3D网页的绘图技术，底层是JavaScript APIWebGL 技术旨在帮助我们在不使用插件的情况下在任何兼容的网页浏览器中开发交互式 2D 和 3D 网页效果。
【前沿技术了解】web图形Canvas、svg、WebGL、数据可视化引擎的技术选型
luemeon的博客
11-26 757
不同库使用不同的渲染技术。使用G2（canvas），f2（移动端），G6（用于图关系数据）、L7（三维）WebGL等更高级的技术。将一张跨域的图片绘制到 canvas 上，这个 canvas 就是被污染的，此时无法读取该 canvas 的数据。了解底层原理可以帮助你更好地优化代码和解决问题，因为你对系统如何工作有更深入的理解。在遇到复杂问题时，缺乏底层原理的理解可能会限制你找到最佳解决方案的能力。在不设置宽高的情况下，默认为300 * 150，超出部分会被隐藏。，它是浏览器提供的绘制动画的 api。
令人激动的新兴 Web 技术：WebGL和SVG
weixin_34301307的博客
03-22 350
Bruce Lowson 是 Opera 开放 web 标准的撰写人员之一，一些没有包含在 HTML5 之内的浏览器技术十分奇妙，包括 WebGL 和 SVG，作者希望通过本文与共同爱好者们分享。 　　最近一位 HTML5 专家 Rich Clark(作者的好朋友)为大家做了一个 HTML5 APIs 的简介，在文章中为大家指向了一个令人迷惑的网页(web 平台：浏览器技术...
canvas 3D demo
weiweiweb888的博客
12-29 874
canvas
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值