getContext("2d") 对象

为什么要整出这么一个对象？

如何在网页上画画？比如说画个矩形，这个用div的边框也许可以模拟。那么画个渐变的矩形呢？h5之前都是不好做的。
因此h5就发明了这个getContext("2d") 对象，用这个来进行简单作画。

画个矩形

结果

image.png

很简单，大致就是分为
首先创建画布，之后创建那个内置的2d对象，之后用rect方法画矩形。
HTML canvas rect() 方法 | 菜鸟教程

来个高级的，画个带渐变的矩形

结果如图

image.png

基本思路是
创建画布
创建2d对象
创建渐变对象
然后绘制图形，注意这次就不要rect方法，用fillrect方法，表示绘制一个被填充的矩形。

至于每个参数代表的意思
参考
HTML 画布 | 菜鸟教程