Javascript 动画之间的画布闪烁

我有一个去学校的练习，我对html/js非常熟悉。我的问题是我的画布在闪烁，就像擦除一个图像，然后放置另一个，但速度非常快。我想在同一时间的两个图像。代码如下：

var CanvasXSize=800； var CanvasYSize=200； var速度=10；//越低越快 var量表=1； 变量y=-4.5；//垂直偏移 //主程序 var dx=0.75； var-imgW； var-imgH； var x=0； var-clearX； var-clearY； var-ctx； var-imgFunct； var i=0； 函数加载{ canvas=document.getElementById'canvas'； ctx=canvas.getContext2d； img=新图像； img2=新图像； img.src=https://sapires.000webhostapp.com/assets/simba.png'; img.onload=已加载； img2.onload=已加载； } 函数加载{ imageReady=true； 设置超时更新，1000/60； } 函数重画{ ctx.fillStyle='000000'； ctx.fillRect0，0，canvas.width，canvas.height； 如果你准备好了{ ctx.drawImageimg，帧*96,0,96,54， canvas.width-i，canvas.height/2+100,96,54； i+=8； } } var帧=0； var lastUpdateTime=0； var-acDelta=0； var msPerFrame=100； 功能更新{ 请求动画框架更新； var delta=Date.now-lastUpdateTime； 如果acDelta>msPerFrame { acDelta=0； 重画； frame++； 如果帧>=6帧=0； }否则 { acDelta+=delta； } lastUpdateTime=Date.now； } 函数add{//Imagem de fundo var img1=新图像； var img2=新图像； var img3=新图像； var img4=新图像； img1.src=https://sapires.000webhostapp.com/assets/Primavera.jpg'; img2.src=https://sapires.000webhostapp.com/assets/Verao.jpg'; img3.src=https://sapires.000webhostapp.com/assets/Outono.jpg'; img4.src=https://sapires.000webhostapp.com/assets/Inverno.jpg'; var a=document.getElementById'estacao'。值； var b=document.getElementById'cor'。值； var trainColor=document.getElementById'canvas'； 如果b==5{ trainColor.style.border=20px纯红色； }否则{ ifb==6{ trainColor.style.border=20px纯蓝色； }否则{ trainColor.style.border=20px纯绿色； }} ifa==1{ carregaimgim1； }否则{ ifa==2{ carregaImgimg2； }否则{ ifa==3{ carregaImgimg3； }否则{ carregaImgimg4； }}}} 函数carregaimgimgfunt{ imgFunct.onload=函数{ imgW=imgFunct.width*刻度； imgH=imgFunct.高度*刻度； 如果imgW>canvaxSize{ //图像比画布大 x=画布尺寸-imgW；   } 如果imgW>canvaxSize{ //图像宽度大于画布 clearX=imgW； }其他{ clearX=拉票；   } 如果imgH>拉票{ //图像高度大于画布 clearY=imgH； }其他{ clearY=拉票；   } //获取画布上下文 ctx=document.getElementById'canvas'.getContext'2d'； ctx.clearRect0，0，clearX，clearY；//清除画布 //设置刷新率 返回设置间隔、速度； } 函数图{ 空载； ctx.clearRect0，0，clearX，clearY；//清除画布 //如果图像为0{ ctx.drawImageimgFunct，-imgW+x，y，imgW，imgH；   } //绘制附加图像2 如果x-imgW>0{ ctx.drawImageimgFunct，-imgW*2+x，y，imgW，imgH；   } } //图像大小>画布大小 否则{ //重置，从头开始 如果x>CanvasXSize{ x=画布尺寸-imgW；   } //画传统形象 如果x>canvaxSize imgW{ ctx.drawImageimgFunct，x-imgW+1，y，imgW，imgH；   } } //画图 ctx.drawImageimgFunct，x，y，imgW，imgH； //移动量 x+=dx； } } console.logx； /*一些HTML5标签 */ 旁白、页脚、页眉、导航、剖面{ 显示：块； } 身体{ 背景色：bbb； 颜色：3838； } 帆布{ 背景色：fff； } 标题{ 垫底：10px； } 标题a{ 颜色：30f； 文字装饰：无； } 旁白{ 填充顶部：6px； } div{ 边框样式：凹槽； 边框颜色：珊瑚； 边框宽度：7px； } /*索引页 */ 索引体{ 背景色：fdeba1； 字体系列：沃尔科恩，衬线； 颜色：000； } 索引体a{ 文字装饰：无； 颜色：b30300； } 索引身体描述，索引身体练习{ 溢出：自动； 最大宽度：900px； 保证金：0px自动20px自动； 左侧填充：15px； 垫底：15px； 背景色：fff； 边界半径：15px； } 索引正文说明{ 边缘顶端：40px； } 索引体h1{ 颜色：b30300； } 索引正文说明h2{ 页边距底部：0； } 索引体h1 a { 文字装饰：下划线； 颜色：b30300； } 索引体li h2、索引体li h3、索引体li h4{ 颜色：000； } 索引体li h3{ 边缘底部：0px； } 索引体描述{ 保证金：0； 填充：0； 列表样式类型：无； } 索引体说明ul li{ 垫底：0.6em； } .集装箱{ 显示：表格； 宽度：100%； 高度：自动； } .container.text{ 显示：表格单元格； 身高：100%； 垂直对齐：中间对齐； } .集装箱img{ 填充：0 20px； 显示：块； 浮动：对； } .集装箱，完毕{ 明确：两者皆有； } 练习ul{ 保证金：0； 填充：4px20px 10px 20px； } 习题{ 利润率：0 20px 10px 0； 填充：0； 列表样式类型：无； } 李国宝{ 垫面：5px； } 练习{ 左侧填充：60px； 列表样式类型：十进制前导零； } 练习ol li img，练习ol li img{ 左边距：4倍； 保证金底部：-10； } 练习h2{ 利润率：10px0； } 特拉巴约9831 您的浏览器不支持画布元素

埃斯塔乔-科多科米奥酒店 普里马维拉 维拉奥 奥托诺 因弗诺 韦尔梅柳 蓝色 佛得角 开始

---

这是因为清除画布，然后设置间隔来绘制画布。而是在开始绘制时清除矩形。您已经在draw函数中清除了rect，所以只需在返回setInterval之前删除该行…

您好，thks需要帮助，我删除了该行，但仍有闪烁。。。您可以尝试上面的代码。