如何用HTML5的canvas里面画图?

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

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

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

有了这个基础,我们可以再画一个简单的柱状图(点“运行”按钮来查看运行结果):

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

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