canvas反复绘制后绘制的帧率变慢
发布于 6 年前 作者 xiaxiong 15551 次浏览 来自 问答

onTapCanvas: function (event) {

console.log("onTapCanvas ", event);

let that = this

let canvasX = event.detail.x - event.currentTarget.offsetLeft

let canvasY = event.detail.y - event.currentTarget.offsetTop

let centerX = canvasX - size * 0.5

let centerY = canvasY - size * 0.5

let ctx = that.canvasContext

let path = “…/…/images/SH04-CO00.jpg”

ctx.drawImage(path, centerX, centerY, 64, 64)

ctx.draw(true, function () {

})

},

这样一段代码,手动在画布上进行单词点击绘制图片,进行这样的操作多次之后,每次绘制的帧率越来越慢,从刚开50fps一直降到20多,看到图片绘制到画布的反馈越来越慢。

注:ctx.draw中true参数是为了保留之前绘制的内容。

请问是什么原因造成这个效率下降的?

2 回复

我也遇到同样的问题了,画一会儿之后就会很卡,不知道是不是因为什么数据一直在增加导致的,有没有什么办法清空掉那些不必要的缓存或者是对这个canvas进行一下优化

将true改为false后帧率就没有这么慢了,求大大们解惑。

回到顶部