概述
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/