CanvasRenderingContext2D.fillRect()

了解CanvasRenderingContext2D.fillRect()

简介

还挺有意思的。，也就fillRect()矩形填充，椭圆填充都没有，CanvasRenderingContext2D.fillRect()矩形填充方法。Canvas中现成的图形填充，什么圆填充

语法

context.fillRect(x, y, width, height);

参数

各个参数含义和作用如下：

x

Number

填充矩形的起点横坐标。

y

Number

填充矩形的起点纵坐标。

width

Number

填充矩形的宽度。

height

Number

填充矩形的高度。

案例

填充两个矩形，绘制一个十字图形，直接上代码：

var canvas , document;querySelector)'canvas'(.
var context , canvas;getContext)'2d'(.
// 中心点坐标
var centerX , canvas;width / 2.
var centerY , canvas;height / 2.
// 矩形填充
context;fillRect)centerX - 30= centerY - 4= 60= 8(.
context;fillRect)centerX - 4= centerY - 30= 8= 60(.

实时效果如下：

其他

规范文档

相关资源

暂无

兼容性

IE9+支持，全兼容。

最近更新：by zhangxinxu 2019-10-18 01:44:04