数据可视化基础 - canvas基础篇(二):填充/清除,与绘制矩形

159 阅读1分钟

内容整理承接:

《数据可视化基础 - canvas基础篇(一):描边与绘制》

2.3.7 填充(fill)

语法:ctx.fill();

解释:填充,是将闭合的路径的内容填充具体的颜色。默认黑色;

image.png

图2-14: image.png

2.3.8 快速创建矩形 rect()方法

语法:ctx.rect(x, y, width, height);

解释:x, y是矩形左上角坐标, width和height都是以像素计;

rect方法只是规划了矩形的路径,并没有填充和描边。

2.3.9 快速创建描边矩形和填充矩形

语法: ctx.strokeRect(x, y, width, height);

- 参数跟2.3.8相同,注意此方法绘制完路径后立即进行stroke绘制

语法:ctx.fillRect(x, y, width, height);

- 参数跟2.3.8相同, 此方法执行完成后。立即对当前矩形进行fill填充。

2.3.10 清除矩形(clearRect)

语法:ctx.clearRect(x, y, width, hegiht);

解释:清除某个矩形内的绘制的内容,相当于橡皮擦。