uniapp Canvas 在 app上刷新有问题

我用Canvas显示图片动画,在浏览器上是正常（包括手机浏览器），但是打包到Android APP，就帧率非常低

关键代码：

 setInterval(function () {  
                 //context.clearRect(0,0,width,height)  

                 for (let _i = 0; _i < 100; _i++) {   
                     var _x = pos[_i].x;  
                     var _y = pos[_i].y;  

                    context.setTransform(size,0,0,size,_x,_y)  
                    context.rotate(angle++*Math.PI/180)                
                    context.drawImage("/static/logo.png",w,h)  
                    //context.draw(true);  
                    if(angle>=360)  
                        angle = 0;  

                    if(xxx>2)  
                        xxx = 0;  
                    xxx += 0.01;  

                    size += add;  
                    if(size>2 || size<0.5)  
                        add *= -1;  
                    //angle = 46  
                }  
                                context.draw();  
             },30); 

视屏效果

效果地址：http://player.youku.com/embed/XNDM5MTczMzQyNA=
网页和手机APP上运行效果

完整代码：

<template>  
    <view>  
        <canvas style="width: 600px; height: 800px; background: #007AFF;" canvas-id="firstCanvas"></canvas>  
    </view>  
</template>  
<script>  
     export default {  
         onReady: function (e) {  
             let width = 600;  
             let height = 800;  

                         var context = uni.createCanvasContext('firstCanvas')  
             var x = 10;  
             var y = 10;  

             context.setTransform(1,0,0,1,100,100)  
             context.rotate(45*Math.PI/180)  
             context.drawImage("/static/logo.png",0,0)  
             context.draw();  

             let w = -72/2;  
             let h = -72/2;  

             let angle = 0;  
             let xxx = 0.0;  
             let size = 1.0;  
             let pos = [];  
             for (let i = 0; i < 100; i++) {   
                 pos[i] = {x:Math.random()*width,y:Math.random()*height};  
             }  
             let add = 0.001;  
             setInterval(function () {  
                 //context.clearRect(0,0,width,height)  

                 for (let _i = 0; _i < 100; _i++) {   
                     var _x = pos[_i].x;  
                     var _y = pos[_i].y;  

                    context.setTransform(size,0,0,size,_x,_y)  
                    context.rotate(angle++*Math.PI/180)                
                    context.drawImage("/static/logo.png",w,h)  
                    //context.draw(true);  
                    if(angle>=360)  
                        angle = 0;  

                    if(xxx>2)  
                        xxx = 0;  
                    xxx += 0.01;  

                    size += add;  
                    if(size>2 || size<0.5)  
                        add *= -1;  
                    //angle = 46  
                }  
                                context.draw();  
             },30);  
         },  
         methods: {  
             canvasIdErrorCallback: function (e) {  
                 console.error(e.detail.errMsg)  
             }  
         }  
     }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200upx;  
        width: 200upx;  
        margin-top: 200upx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50upx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36upx;  
        color: #8f8f94;  
    }  
</style>