- 当前 Bug 的表现（可附上截图）

查看排行榜、滑动排行榜时会闪屏，而且很严重，非常影响体验。闪屏是黑屏和正常显示交替出现，黑屏时就是整个屏幕是全黑的，然后又显示正常

- 预期表现

实现在开放数据域里，绘制可以滑动的排行榜

- 复现路径

IOS机型（ip7,ip6s,ipad2017都出现)查看排行榜、滑动排行榜时会闪屏，而且很严重，非常影响体验

- 提供一个最简复现 Demo

好像是在心跳定时器里运行的loop函数在重绘canvas时就会闪屏

/**

* 循环函数

* 每帧判断一下是否需要渲染

* 如果被标脏，则重新渲染

*/

function loop() {

if (renderDirty) {

// console.log(`stageWidth :${stageWidth}   stageHeight:${stageHeight}`)

context.setTransform(1, 0, 0, 1, 0, 0);

context.clearRect(0, 0, sharedCanvas.width, sharedCanvas.height);

drawRankPanel();

renderDirty = false;

}

requestAnimationFrameID = requestAnimationFrame(loop);

}

wx.onTouchMove((event) => {

var l = event.changedTouches.length;

for (var i = 0; i < l; i++) {

onTouchMove(event.changedTouches[i]);

}

})

function onTouchMove(event) {

// console.log("onTouchMove evt=", event);

if (totalGroup.length<=2||isOpen==false){

return;

}

touchY = event.clientY;

renderDirty = true;

console.log("2");

}

/**绘制自己的排行榜信息 */

function drawMyRankByData(data,i){

let myY = 1095/1334 *stageHeight;

// 绘制List背景

context.drawImage(assets.myListBG, startX, myY, barWidth, barHeight);

//绘制玩家排名

switch (i) {

case 0:

context.drawImage(assets.NO1Icon, NoOffsetX, myY + NoOffsetY, NoWidth, NoHeight);

break;

case 1:

context.drawImage(assets.NO2Icon, NoOffsetX, myY + NoOffsetY, NoWidth, NoHeight);

break;

case 2:

context.drawImage(assets.NO3Icon, NoOffsetX, myY + NoOffsetY , NoWidth, NoHeight);

break;

default:

//设置字体和描边

context.font = 40 + "px Arial";

context.lineWidth = 8;  //描边大小

context.strokeStyle = '#04af75';//描边颜色

context.strokeText((i + 1) + "", NoTextX, myY + textOffsetY, textMaxSize);//描边文字

context.fillStyle = "#ffffff";//字体颜色

context.fillText((i + 1) + "", NoTextX, myY + textOffsetY, textMaxSize);//绘制序号

}

//绘制头像

var image2 = wx.createImage();

image2.src = data.url;

image2.onload = function () {

renderDirty = true;

console.log("myonload。。。");

}

context.font = fontSize + "px Arial";

context.fillStyle = "#ffffff";//字体颜色

context.drawImage(image2, iconStartX, myY + iconOffsetY , avatarSize, avatarSize);

//绘制名称

context.fillText(data.name + "", nameStartX,myY + textOffsetY , textMaxSize);

//绘制分数

context.fillText("关卡 " + data.scroes, scoreStartX, myY + textOffsetY, textMaxSize);

// renderDirty = true;

}