<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坐标)