H5数据可视化：Canvas和SVG

来源：互联网发布：粒子群算法缺点编辑：程序博客网时间：2024/06/01 22:16

概述

Canvas 和 SVG 是HTML5支持的两种数据可视化（Data Visualization）技术。基于这两种技术，诞生了很多可视化工具。

Canvas通过JavaScript来绘制2D图形。Canvas是逐像素进行渲染的。在Canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
SVG(Scalable Vector Graphics，可伸缩矢量图形)使用XML文档描述来绘制2D图形，这意味着SVG DOM中的每个元素都是可用的。您可以为某个元素附加JavaScript事件处理器。在SVG中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

比较

Canvas和SVG都允许在浏览器中创建图形，但是它们在根本上是不同的，各有强项和弱点。

Canvas适用场景
Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制。
SVG适用场景
SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景。

示例

(1) 使用SVG画圆

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><html>    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">        <circle cx="110" cy="110" r="100" stroke="black" stroke-width="2" fill="red"/>    </svg><html>

效果如下：

(2) 使用Cavas画矩形

<script type="text/javascript">    window.onload = function() {        var canvas = document.getElementById("myCanvas");        var context = canvas.getContext("2d");        //使用rect方法        context.rect(10,10,190,190);        context.lineWidth = 2;        context.fillStyle = "#3EE4CB";        context.strokeStyle = "#F5270B";        context.fill();        context.stroke();        //使用fillRect方法        context.fillStyle = "#1424DE";        context.fillRect(210,10,190,190);    }</script><html>    <canvas id="myCanvas" width="800" height="300">        <p>Your browser does not support the canvas element!</p>       </canvas><html>

效果如下：

开源库

目前有很多开源可视化JS库，目前应用比较广泛的库有，

D3.js (Data-Driven Documents ，数据驱动文档；基于SVG )
https://d3js.org/
ECharts （基于Canvas）
http://echarts.baidu.com/

其他

无论Canvas还是SVG都不能绘制3D图形。而webGL 可基于JavaScript实现3D绘图，浏览器无需插件支持，Web开发者直接使用js调用相关API就能借助系统显卡（GPU）进行编写代码从而呈现3D场景和对象。

阅读全文

0 0