在canvas组件使用setInterval绘制图片时，华为快应用卡住了怎么办？

问题描述

在我的华为快应用中，setInterval函数用于循环执行使用canvas的代码。但是，在华为手机上渲染图片时，快应用卡住了。 发生异常的代码如下：

click0() {
      this.speed = 0.3
      let ctx = this.$element('canvas').getContext('2d')
      setInterval(() => {
        this.num0 += 2
        this.noise = Math.min(0.5,1) * this.MAX
        this._draw(ctx)
        this.MAX <= 200 && (this.MAX += 4)
      },20)
    },_draw(ctx) {
      this.phase = (this.phase + this.speed) % (Math.PI * 64)
      ctx.clearRect(0,this.width,this.height)
      this._drawLine(ctx,-2,'rgba(0,194,255,0.2)')
      this._drawLine(ctx,-6,0.4)')
      this._drawLine(ctx,4,0.6)')
      this._drawLine(ctx,2,0.8)')
      this._drawLine(ctx,1,1)',4)
    },

解决方法

您可以先通过调用设备信息查询接口获取服务提供商，判断华为快应用是否支持快应用。

如果是，请将时间间隔设置为大于 100 毫秒。示例代码如下：

onShow: function () {
            var that = this
            device.getInfo({
                success: function (ret) {
                    console.log("handling success:",JSON.stringify(ret));
                    that.engineProvider = ret.engineProvider;
                },fail: function (erromsg,errocode) {
                    console.log("message:",erromsg,errocode);
                }
            })
        },click0() {
            var that = this
            this.speed = 0.3
            console.log(that.engineProvider)
            let ctx = this.$element('canvas').getContext('2d')
            if (that.engineProvider === "huawei") {
                setInterval(() => {
                    this.num0 += 2
                    this.noise = Math.min(0.5,1) * this.MAX
                    this._draw(ctx)
                    this.MAX <= 200 && (this.MAX += 4)
                },120)
            } else {
                setInterval(() => {
                    this.num0 += 2
                    this.noise = Math.min(0.5,20)
            }
        },_draw(ctx) {
            this.phase = (this.phase + this.speed) % (Math.PI * 64)
            ctx.clearRect(0,this.width,this.height)
            this._drawLine(ctx,-2,'rgba(0,194,255,0.2)')
            this._drawLine(ctx,-6,0.4)')
            this._drawLine(ctx,4,0.6)')
            this._drawLine(ctx,2,0.8)')
            this._drawLine(ctx,1,1)',4)
        },_drawLine(ctx,attenuation,color,width) {
            ctx.save()
            ctx.moveTo(0,0);
            ctx.beginPath();
            ctx.strokeStyle = color;
            ctx.lineWidth = width || 1;
            var x,y;
            for (var i = -this.K; i <= this.K; i += 0.01) {
                x = this.width * ((i + this.K) / (this.K * 2))
                y = this.height / 2 + this.noise * this._globalAttenuationFn(i) * (1 / attenuation) * Math.sin(this.F * i - this.phase)
                ctx.lineTo(x,y)
            }
            ctx.stroke()
            ctx.restore()
        },

详情请参考：

Introduction to the canvas API

Quick app materials