### 現象描述：
快應用中透過setinterval週期函式來迴圈觸發canvas繪製程式碼，在華為手機上繪製的動畫會很卡頓，不流暢。

### 問題程式碼如下：

```java
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, 0, this.width, this.height)
      this._drawLine(ctx, -2, 'rgba(0, 194, 255, 0.2)')
      this._drawLine(ctx, -6, 'rgba(0, 194, 255, 0.4)')
      this._drawLine(ctx, 4, 'rgba(0, 194, 255, 0.6)')
      this._drawLine(ctx, 2, 'rgba(0, 194, 255, 0.8)')
      this._drawLine(ctx, 1, 'rgba(0, 194, 255, 1)', 4)
    },
```

### 問題分析：
this._draw()方法中的canvas繪製操作時間長，最低需要100ms的繪製時間，而程式碼中週期時間只有20ms，華為快應用引擎會執行這個週期內的操作，然後才能執行下一個週期。所以設定為20ms時的效果會看起來比較慢。

### 解決方法：
開發者可以先根據裝置資訊介面獲取下裝置資訊中的引擎的提供商判斷是否是華為的快應用引擎，如果是華為快應用引擎則設定間隔時間大於100ms，不是則可以設定小於100ms，可解決華為快應用引擎和快應用聯盟引擎差異問題。程式碼如下（紅色部分）：

```java
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, 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, 0, this.width, this.height)
            this._drawLine(ctx, -2, 'rgba(0, 194, 255, 0.2)')
            this._drawLine(ctx, -6, 'rgba(0, 194, 255, 0.4)')
            this._drawLine(ctx, 4, 'rgba(0, 194, 255, 0.6)')
            this._drawLine(ctx, 2, 'rgba(0, 194, 255, 0.8)')
            this._drawLine(ctx, 1, 'rgba(0, 194, 255, 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()
        },
```

欲瞭解更多詳情，請參閱：

canvas介面介紹：
[https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-api-canvas](https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-api-canvas)

快應用開發指導文件：[https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-whitepaper](https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-whitepaper)

---
原文連結：[https://developer.huawei.com/consumer/cn/forum/topic/0204404988672310224?fid=18](https://developer.huawei.com/consumer/cn/forum/topic/0204404988672310224?fid=18)

原作者：Mayism

華為快應用在setInterval中繪製canvas動畫卡頓，怎麼破

相關文章