一个非常简单的功能。动态画一个正方形方框。一个小方框从左上角开始，往下，再往右，再往上，再往左闭合。中间发生严重的花屏，而且画的过程中似乎也不是按套路走的。在编辑器上一切正常，在小米MIX2上（其他机型也有）花屏，而且画的过程中有断开的情况。贴上代码：

var canvas = wx.createCanvas();
const context = canvas.getContext('2d');
var btn_obj = [];
var btn_animate_stop = false;
function btn_ani(x, y, r, speed, left, top) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.speed = speed ? speed : 4;
    this.vx = 0;
    this.vy = speed;
    this.left = left;
    this.top = top;
}
btn_ani.prototype.redraw = function(){
    if (this.x + this.r * 2 + this.vx >= this.left + 200) {
        this.vx = 0;
        this.vy = -this.speed;
    }
    
    if (this.y + this.vy <= this.top) {
        this.vy = 0;
        this.vx = -this.speed;
    }
    if (this.x + this.vx < this.left) {
        this.vy = this.speed;
        this.vx = 0;
    }
    if (this.y + this.r * 2 + this.vy >= this.top + 50) {
        this.vy = 0;
        this.vx = this.speed;
    }
    this.x += this.vx;
    this.y += this.vy;


    context.beginPath()
    context.fillStyle = "red";//填充颜色,默认是黑色
    context.fillRect(this.x, this.y, this.r * 2, this.r * 2)
    context.closePath();
    //context.fillStyle = "rgba(0,0,0,0.015)";
    //context.fillRect(0, 0, canvas.width, canvas.height)        
}
var top = canvas.height * 0.382;
btn_obj.push(new btn_ani((canvas.width - 200) / 2, top, 2, 2, (canvas.width - 200) / 2, top));
animate2();
function animate2() {
    if(btn_animate_stop == true){
        return;
    }
    for(var x in btn_obj){
        btn_obj[x].redraw();
    }
    requestAnimationFrame(animate2)
}
以上就是全部代码。本意是想画一个200宽，50高的方框。
上面注释了2行代码，本来是想加个拖尾效果。发现也不正常。千万不要说每次重画之前要clearRect啊，因为其实还要加拖尾效果的。

下面的图是期望画完以后是这样子的：

而在画的过程中，不仅闪屏，还出现了中间断了的情况，十分诡异，我截了个图：

诡异1：闪屏。（上面那些白色的就是闪屏。闪出了很多花样。）

诡异2：应该就一个画笔在画的，出现了4个。

诡异3：本来是从方框的左上角开始的，但是中间断了。不一定从哪断。

新人刚从H5转微信小游戏。求指导