极客观点
项目管理
HarmonyOS
代码如下 在进行
if(-ballX >= canvas.width-10){
ballX = 0
ctx.drawImage(img,canvas.width, 0,0,0);
}这个地方判断的二次重新绘制的时候会出现闪屏 有大神知道怎么解决吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>loading</title>
<style>
#loading{
display: block;
margin: 0 auto;
}
</style></head>
<body>
<canvas id="loading" width="187" height="91"></canvas>
<script>
var requestAnimationFrame = requestAnimationFrame ? requestAnimationFrame : webkitRequestAnimationFrame,
cancelAnimationFrame = cancelAnimationFrame ? cancelAnimationFrame : webkitCancelAnimationFrame;
var canvas = document.getElementById('loading')
var ctx = canvas.getContext("2d")
/*
设置背景
createPattern(img,平铺方式)
平铺方式:repeat,repeat-x,repeat-y,no-repeat
*/
var imgs = new Image();
var xspeed = -2;
var ballX = 0
// imgs.src = "../loading/images/bg.png";
// imgs.onload = function() {
// ctx.drawImage(imgs, 0, 0);
// }
var img = new Image();
img.src = "../loading/images/bg.png";
function animate(){
requestAnimationFrame(animate);
draw();
}
requestAnimationFrame(animate);
function draw(){
ballX += xspeed;
ctx.beginPath();
if(-ballX >= canvas.width-10){
ballX = 0
ctx.drawImage(img,canvas.width, 0,0,0);
}else{
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img,ballX, 0);
}
ctx.closePath();
}
</script></body>
</html>
闪烁是因为图片从无到有，视觉上的差异性导致的，不是代码的问题，你可以改下实现逻辑，如：渐进式的 无--有--无