前言

最近在学习可视化相关的知识，仅以此系列记录学习过程。如有不足还请指出。目前前端实现可视化常用的有两种方案，一种手canvas，一种是svg，那么这两种又有什么区别呢？做可视化又该如何选择他们呢？

首先我们先来用canvas和svg分别实现一个简单的demo来对比两者之间的差别。

canvas

<canvas id="canvas"></canvas>

/* 
    获得绘制上下文并且设置维度信息
*/

// 获得 canvas 容器元素
const canvas = document.getElementById("canvas");

// 设置 canvas 的样式宽高
// 样式宽高决定了 canvas 在画布上呈现的大小
canvas.style.width = 600 + "px";
canvas.style.height = 600 + "px";

// 设置 canvas 画布宽高
// 这个宽高是可以绘制区域的大小
// 样式宽高默认等于画布宽高
canvas.width = 600;
canvas.height = 600;

// 获得绘制的上下文
// 之后的 API 都是通过调用 context
const context = canvas.getContext("2d");

/* 
    绘制视觉元素
*/

// 绘制一个矩形
// 设置填充颜色
context.fillStyle = "white";
// 设置边框颜色
context.strokeStyle = "black";
// 设置边框宽度
context.lineWidth = 10;
// 绘制边框
context.strokeRect(0, 0, 100, 100);
// 绘制填充颜色以及区域
context.fillRect(5,5,95,95);
// 绘制一段文字
// 文字颜色
context.fillStyle = "pink";
// 设置文字的大小和字体
context.font = "25px PingFangSC-Regular, sans-serif";
// 绘制文字内容主体以及绘制区域
context.fillText("hello world", 150,20)

// 旋转  注意，此处旋转针对的是画布。也就是说，从这块往下，绘制的都是旋转的
context.fillStyle = "blue";
context.translate(100, 100);
// degree * Math.PI / 180
// 逆时针旋转30°
context.rotate(-30 * Math.PI / 180);
// x放大2，y放大3。
context.scale(2, 3);
context.fillRect(0, 0, 50, 50);

简单来看，fillStyle设置绘制样式，fillRect设置绘制区域。中间的一些操作便是针对绘制的一些细节处理。

svg

<!-- 
    width, height 可以简单理解为样式宽高
    viewBox 可以简单理解为画布宽高
 -->
 <svg
    xmlns = "https://www.w3.org/2000/svg"
    version = "1.1"
    width = "600"
    height = "600"
    viewBox = "0, 0, 600, 600"
 >
    <rect 
        height = "95"
        width = "95"
        x = "5"
        y = "5"
        stroke = "black"
        stroke-width = "5"
        fill = "white"
    />

    <text
        fill = "pink"
        font-family="PingFangSC-Regular, sans-serif"
        font-size = "25"
        x = "150"
        y = "20"
    >
        hello world
    </text>
    <!-- 
        在g标签中的都会旋转。
    -->
    <g
        transform = "translate(100, 100) rotate(-30) scale(2, 3)"
    >
        <rect height = "50" width = "50" x = "0" y = "0" fill = "blue"/>
    </g>
 </svg>

关于 svg 与 g 标签，可查看MDN具体用法。

总结

写了具体的demo，我们来总结一下两者区别。 svg优点：方便交互（因为有dom结构，方便监听） svg缺点：性能略差（因为是dom结构，对其操作会频繁触发重绘回流） canvas与其恰恰相反

本文参考AntV团队所著小册可视化入门：从 0 到 1 开发一个图表库。

前端数据可视化1

前言

canvas

svg

总结