number offscreencanvas.requestanimationframe(function callback)
基础库 或更高版本; 若版本较低,建议采取 兼容处理。
主体: 企业支付宝小程序 、 个人支付宝小程序
注册一个函数,在下一次重绘前执行,一般用来绘制动画帧。
与 canvas.requestanimationframe 同理。
可用 offscreencanvas.cancelanimationframe
取消注册。
效果示例
代码示例执行效果
function callback
下一次重绘时要执行的函数。
参数
属性 | 类型 | 描述 |
---|---|---|
timestamp | number | 回调函数被执行时的时间。domhighrestimestamp 时间戳。 |
number id
可用于取消函数注册的 id。
代码示例
.js
.axml
page({
onready() {
this.offcanvas = my.createoffscreencanvas()
this.offctx = this.offcanvas.getcontext('2d')
this.x = 0
this.y = 0
},
render() {
const { offcanvas, offctx, x, y } = this
// 在离屏画布中渲染内容
offctx.clearrect(0, 0, offcanvas.width, offcanvas.height)
offctx.fillstyle = 'red'
offctx.fillrect(x, y, 50, 50)
this.x = ((x 0.5) % offcanvas.width)
this.y = ((y 0.5) % offcanvas.height)
},
draw(time) {
console.log(time)
const { ctx, offcanvas } = this
this.render()
// 绘制渲染内容
ctx.clearrect(0, 0, ctx.canvas.height, ctx.canvas.height)
ctx.drawimage(offcanvas, 0, 0)
offcanvas.requestanimationframe(this.draw.bind(this))
},
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec((res) => {
this.canvas = res[0].node
this.ctx = this.canvas.getcontext('2d')
this.draw()
})
},
})
<canvas id="canvas" type="2d" onready="oncanvasready">canvas>