【HTML】关于h5中Canvas绘图

<canvas>标签仅仅是一块空白的“画布”，并不会绘制图形，需要通过JS脚本对其进行绘制。

<canvas>标签常用属性：

id            设置画布的id

style       设置画布的样式

class       设置画布的类

hidden   设置是否隐藏。true为隐藏，false为正常显示

width     设置画布的宽度。当属性值改变，画布中已绘制的图形会被擦除。

height    设置画布的高度。当属性值改变，画布中已绘制的图形会被擦除。

在JS脚本中，通过document.getElementById()等方法获得该canvas对象。

调用canvas对象的getContext（）方法，语法为  canvas.getContext(contextID)

参数contextID制定了想要在画布上绘制的类型，当前唯一合法值为“2d”，指定二维绘图。

CanvasRenderingContext2D对象有很多属性及方法，列举了两个较为重要的：

fillStyle属性设置或返回用于填充绘画的颜色（color）、渐变（gradient）或者模式（pattern）

fillRect方法绘制“已填色”的矩形。 语法为context.fillRect（x,y,width,height）; （x,y分别为矩形左上角x,y坐标）