canvasrenderingcontext2d.fillrect(number x, number y, number width, number height)
基础库 或更高版本； 若版本较低，建议采取 兼容处理。
主体： 企业支付宝小程序 、 个人支付宝小程序
绘制一个实心矩形。
此方法直接在画布上绘制内容，不会影响任何路径，因此在这之后调用 fill 或者 stroke 方法不会影响此方法绘制的内容。
若要绘制空心矩形，可使用 strokerect。
效果示例
代码示例执行效果
number x
矩形左上角的 x 轴坐标。
number y
矩形左上角的 y 轴坐标。
number width
矩形的宽度。
number height
矩形的高度。
绘制矩形
全屏填充
.js
.axml
page({
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec((res) => {
const canvas = res[0].node
const ctx = canvas.getcontext('2d')
ctx.fillrect(10, 10, 100, 80)
})
},
})<canvas id="canvas" type="2d" onready="oncanvasready">canvas>.js
.axml
page({
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec((res) => {
const canvas = res[0].node
const ctx = canvas.getcontext('2d')
ctx.fillstyle = 'white'
ctx.fillrect(0, 0, canvas.width, canvas.height)
})
},
})<canvas id="canvas" type="2d" onready="oncanvasready">canvas>此示例填充了整个画布，通常用于设置背景色。