Javascript 在画布中从上到下滚动图像

如何从上到下滚动图像。目前，它正在从左向右移动，并尝试交换“xpos”和“y”值，但图像正在失真。如有任何帮助，将不胜感激

（函数（）{
window.requestAnimationFrame=window.requestAnimationFrame
||window.webkitRequestAnimationFrame
||window.mozRequestAnimationFrame
||函数（回调）{window.setTimeout（回调，1000/60）；}；
var canvas=document.getElementById（'bg'）；
var context=canvas.getContext（'2d'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var循环=假；
var totalSeconds=0；
var img=新图像（）；
img.onload=图像加载；
img.src=https://preview.ibb.co/dpQ6Ak/test.jpg';
函数imageLoaded（）{
抽签（0）；
startStop（）；
}
var lastFrameTime=0；
函数startStop（）{
循环=！循环；
如果（循环）{
lastFrameTime=Date.now（）；
请求动画帧（循环）；
}
}
函数循环（）{
如果（！循环）{
返回；
}
请求动画帧（循环）；
var now=Date.now（）；
var deltaSeconds=（现在-lastFrameTime）/1000；
lastFrameTime=现在；
绘制（增量秒）；
}
函数绘制（增量）{
总秒数+=增量；
var vx=100；//背景以100像素/秒的速度滚动
var numImages=Math.ceil（canvas.width/img.width）+1；
var xpos=总秒数*vx%img.width；
context.save（）；
translate（-xpos，0）；
对于（变量i=0；i
我想这就是你的答案


（函数（）{
window.requestAnimationFrame=window.requestAnimationFrame
||window.webkitRequestAnimationFrame
||window.mozRequestAnimationFrame
||函数（回调）{window.setTimeout（回调，1000/60）；}；
var canvas=document.getElementById（'bg'）；
var context=canvas.getContext（'2d'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var循环=假；
var totalSeconds=0；
var img=新图像（）；
img.onload=图像加载；
img.src=https://preview.ibb.co/dpQ6Ak/test.jpg';
函数imageLoaded（）{
抽签（0）；
startStop（）；
}
var lastFrameTime=0；
函数startStop（）{
循环=！循环；
如果（循环）{
lastFrameTime=Date.now（）；
请求动画帧（循环）；
}
}
函数循环（）{
如果（！循环）{
返回；
}
请求动画帧（循环）；
var now=Date.now（）；
var deltaSeconds=（现在-lastFrameTime）/1000；
lastFrameTime=现在；
绘制（增量秒）；
}
函数绘制（增量）{
总秒数+=增量；
var vx=100；//背景以100像素/秒的速度滚动
var numImages=Math.ceil（canvas.height/img.height）+1；
var xpos=总秒数*vx%img.height；
context.save（）；
context.translate（0，xpos）；
对于（变量i=0；i
绘制任意方向移动的图像


var-imageScroll=scrollImage（“myCan”，1.57,60）；
设置超时（随机滚动，10000）；
函数randomScroll（）{
imageScroll.setSpeed（Math.random（）*60+20）
.setDirection（Math.random（）*Math.PI*2）；
setTimeout（随机滚动，1000+2000*Math.random（））；
}
函数滚动图像（画布ID、方向、速度、URL）{
var w，h，iW，iH；//宽度和高度的别名，图像w，h
var x，y；//当前图像位置；
var lastTime；//跟踪帧时间
var stop=false；//当为true时停止
const rAF=requestAnimationFrame；//别名
const canvas=document.getElementById（canvasId）；
如果（canvas===null）{抛出新引用错误（“找不到id为““+canvasId+””）的canvas}
const ctx=canvas.getContext（'2d'）；
const img=新图像；
w=画布宽度=内部宽度；
h=画布。高度=内部高度；
x=y=lastTime=0；
lastTime=0；
img.src=URL？URL:'https://preview.ibb.co/dpQ6Ak/test.jpg';
img.onload=（）=>{
iW=img.宽度；
iH=img.高度；
循环（0）
}
函数循环（时间）{
var fTime=（time-lastTime）/1000；//获取帧时间
lastTime=时间；
x+=Math.cos（方向）*速度*fTime；//更新位置
y+=数学sin（方向）*速度*fTime；
drawImageRep（x，y）；//在x，y处绘制图像
如果（！stop）{requestAnimationFrame（循环）}
}
函数drawImageRep（x，y）{
x=（（x%iW）+iW）%iW；
y=（（y%iH）+iH）%iH；
对于（var iy=y-iH；iy