如何用HTML5的canvas里面画图？

2021-09-22大约3分钟

在HTML里画一些简单的图的时候，有时候我们并不需要像HighCharts这样重量级的画图库。在HTML5的canvas里面画一些简单的图并不难。

从一个最简单的例子看起：

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #D3D3D3;">
你的浏览器不支持canvas标签.
</canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.rect(20, 20, 150, 100);
    ctx.stroke();
</script>
</body>
</html>

运行代码，可以看到我们很容易在canvas里面画了一个方框：方框的起始位置是(20, 20)，宽度和高度分别是150和100。

有了这个基础，我们可以再画一个简单的柱状图（点“运行”按钮来查看运行结果）：

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="520" height="300" style="border:1px solid #D3D3D3;">
你的浏览器不支持canvas标签.
</canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    const LEFT_MARGIN = 15;
    const TOP_MARGIN = 10;
    const TOTAL_HEIGHT = 300;
    const COL_WIDTH = 30;
    const COL_GAP = 10;
    
    const HALF_HEIGHT = TOTAL_HEIGHT / 2;
    const MAX_COL_HEIGHT = HALF_HEIGHT - TOP_MARGIN;
    
    const drawColumn = (position, height) => {
        const color = height > 0 ? '#E96800' : '#67BF3C';
        ctx.beginPath();
        ctx.rect(LEFT_MARGIN + (COL_WIDTH + COL_GAP) * position, 
                 HALF_HEIGHT, 
                 COL_WIDTH, 
                 (-1 * MAX_COL_HEIGHT * height) / 100
                );
        ctx.fillStyle = color;
        ctx.fill();
    };
    
    drawColumn(0, 50);
    drawColumn(1, -70);
    drawColumn(2, 100);
    drawColumn(3, 60);
    drawColumn(4, -60);
    drawColumn(5, 90);
</script>
</body>
</html>

这样，一个简单的柱状图就画好了。

本篇的目的不是鼓励大家造轮子，而是在某些特别简单的情况下可以尝试自己画图，也是挺有意思的。

HTML Canvas