使用javascript滚动图片

我已经编写了一个javascript，可以使用画布在屏幕上滚动图片。我无法让这项工作，并将感谢任何帮助。我可以使用一张图片而不使用数组来实现这一点，但我希望能够使用一个数组，并在图片之间留出一个小空间，一个接一个地加载图片

var img=新图像[]；
img[0]=新图像；
img[0].src='Images/Juniors.jpg'；
img[1]=新图像；
img[1].src='Images/minis.jpg'；
img[2]=新图像；
img[2].src='Images/senior.jpg'；
var CanvasXSize=1040；
var CanvasYSize=240；
无功转速=40//越低越快
var量表=1.05；
变量y=-4.5//垂直偏移
var dx=0.75；
var-imgW；
var-imgH；
var x=0；
var-clearX；
var-clearY；
var-ctx；
img.onload=函数（）{
imgW=img.宽度*刻度；
imgH=img.高度*刻度；
如果（imgW>CanvasXSize）{x=CanvasXSize imgW；}//图像大于画布
如果（imgW>CanvasXSize）{clearX=imgW；}//图像大于画布
else{clearX=CanvasXSize；}
如果（imgH>CanvasYSize）{clearY=imgH；}//图像大于画布
else{clearY=CanvasYSize；}
ctx=document.getElementById（'canvas'）.getContext（'2d'）；//获取画布元素
}
函数绘图（）{
//透明帆布
clearRect（0,0，clearX，clearY）；
//如果图像为（CanvasXSize imgW））{
ctx.drawImage（img、x-CanvasXSize+1、y、imgW、imgH）；
}
}
//如果图像>画布大小
否则{
//重置，从头开始
如果（x>（CanvasXSize））{x=CanvasXSize imgW；}
//画传统形象
如果（x>（CanvasXSize imgW））{ctx.drawImage（img[0]，x-imgW+1，y，imgW，imgH）；}
}
对于（i=0；i

---

要在需要时加载多个图像，应使用图像预加载程序代码：

var imgs=[];
var imagesOK=0;
var imageURLs=[];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house1.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house2.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house3.jpg");

loadAllImages();

function loadAllImages(){
    for (var i = 0; i < imageURLs.length; i++) {

      // put each image in the imgs array
      var img = new Image();         
      imgs.push(img);

      // after each image has been loaded, execute this function
      img.onload = function(){ 

          // add 1 to imagesOK
          imagesOK++; 

          // if imagesOK equals the # of images in imgs
          // we have successfully preloaded all images
          // into imgs[]
          if (imagesOK>=imageURLs.length ) {

              // all loaded--start drawing the images
              drawImages(); 

          } 
      };    // end onload
      img.src = imageURLs[i];
    } // end for     
}

然后按图像的中心点偏移绘制图像（请记住，您正在围绕该中心点旋转）

这需要你绞尽脑汁，下面是示例代码和一把小提琴：

正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var-imgs=[]；
var-imagesOK=0；
var-imageurl=[]；
imageURLs.push（“https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house1.jpg");
imageURLs.push（“https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house2.jpg");
imageURLs.push（“https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house3.jpg");
加载图像（）；
函数loadAllImages（）{
对于（var i=0；i=imageURLs.length）{
drawImages（）；
} 
}；//结束加载
img.src=imageURL[i]；
}//结束
}
ctx.线宽=2；
左向量=25；
var-topp=30；
var宽度=100；
var高度=100；
变量旋转=[-10,0,10]；
函数drawImages（）{
要使（var i=0；i在需要时加载多个图像，应使用图像预加载程序代码：

var imgs=[];
var imagesOK=0;
var imageURLs=[];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house1.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house2.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house3.jpg");

loadAllImages();

function loadAllImages(){
    for (var i = 0; i < imageURLs.length; i++) {

      // put each image in the imgs array
      var img = new Image();         
      imgs.push(img);

      // after each image has been loaded, execute this function
      img.onload = function(){ 

          // add 1 to imagesOK
          imagesOK++; 

          // if imagesOK equals the # of images in imgs
          // we have successfully preloaded all images
          // into imgs[]
          if (imagesOK>=imageURLs.length ) {

              // all loaded--start drawing the images
              drawImages(); 

          } 
      };    // end onload
      img.src = imageURLs[i];
    } // end for     
}

然后按图像的中心点偏移绘制图像（请记住，您正在围绕该中心点旋转）

这需要你绞尽脑汁，下面是示例代码和一把小提琴：


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var-imgs=[]；
var-imagesOK=0；
var-imageurl=[]；
imageURLs.push（“https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house1.jpg");
imageURLs.push（“https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house2.jpg");
imageURLs.push（“https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house3.jpg");
加载图像（）；
函数loadAllImages（）{
对于（var i=0；i=imageURLs.length）{
drawImages（）；
} 
}；//结束加载
img.src=imageURL[i]；
}//结束
}
ctx.线宽=2；
左向量=25；
var-topp=30；
var宽度=100；
var高度=100；
变量旋转=[-10,0,10]；
函数drawImages（）{
对于（var i=0；iIn，它以什么方式不起作用？请使用您的JavaScript以及相关的HTML和CSS创建一个脚本，这样我们就可以看到正在发生的事情并进行实验。下面是一个JSFIDLE注释的链接：
var img=new Array[]；
应该是
var img=new Array（）；
（注意括号）或者仅仅是
var img=[]；
（两者都是）。这导致语法错误。我更改为var img=[]；但该程序仍然没有产生预期的结果。我在屏幕上没有看到任何图像。这是我编写的第一个javascript，所以我只是在学习。它以什么方式不起作用？请使用您的javascript以及相关的HTML和CSS创建一个，以便我们可以看到正在发生的事情并进行实验。这是指向JSFidd的链接请注意：
var-img=new-Array[]；
应该是
var-img=new-Array（）；
（注意括号）或者只是
var-img=[]；
（两者都是）。这导致了语法错误。我改为var-img=[]；但是程序仍然不能产生预期的结果。我在屏幕上没有看到任何图像。这是我编写的第一个javascript，所以我只是在学习。
ctx.translate( left+width/2, topp+height/2 )
ctx.rotate( degrees*Math.PI/180 );

ctx.drawImage(img,0,0,img.width,img.height,-width/2,-height/2,width,height);

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

  var canvas=document.getElementById("canvas");
  var ctx=canvas.getContext("2d");

  var imgs=[];
  var imagesOK=0;
  var imageURLs=[];
  imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house1.jpg");
  imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house2.jpg");
  imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house3.jpg");

  loadAllImages();

  function loadAllImages(){
      for (var i = 0; i < imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                drawImages(); 
            } 
        };    // end onload
        img.src = imageURLs[i];
      } // end for     
  }

  ctx.lineWidth=2;
  var left=25;
  var topp=30;
  var width=100;
  var height=100;
  var rotations=[ -10, 0, 10 ];
  function drawImages(){
      for(var i=0;i<imgs.length;i++){
          var img=imgs[i];
          ctx.save()
          ctx.beginPath();
          ctx.translate( left+width/2, topp+height/2 )
          ctx.rotate(rotations[i]*Math.PI/180);
          ctx.drawImage(img,0,0,img.width,img.height,-width/2,-height/2,width,height);
          ctx.rect(-width/2,-height/2,width,height);
          ctx.stroke();
          ctx.restore();
          left+=125;
      }
  }


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=400 height=200></canvas>
</body>
</html>