使用javascript滚动图片

Question

我已经编写了一个JavaScript，该Javascript应该使用画布在屏幕上滚动图片。 我无法使它正常工作，将不胜感激。 我能够使用一张图片而不使用Array来使它工作，但是我希望能够使用Array并一张一张又一张地加载图片，并且它们之间的空间很小。

这是我的代码的JSFiddle 。

var img = new Image[];

img[0] = new Image;
img[0].src = 'Images/Juniors.jpg';

img[1] = new Image;
img[1].src = 'Images/minis.jpg';

img[2] = new Image;
img[2].src = 'Images/senior.jpg';


var CanvasXSize = 1040;
var CanvasYSize = 240;
var speed = 40; //lower is faster
var scale = 1.05;
var y = -4.5; //vertical offset


var dx = 0.75;
var imgW;
var imgH;
var x = 0;
var clearX;
var clearY;
var ctx;

img.onload = function() {
  imgW = img.width*scale;
  imgH = img.height*scale;
  if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas
  if (imgW > CanvasXSize) { clearX = imgW; } // image larger than canvas
  else { clearX = CanvasXSize; }
  if (imgH > CanvasYSize) { clearY = imgH; } // image larger than canvas
  else { clearY = CanvasYSize; }

  ctx = document.getElementById('canvas').getContext('2d');  //Get Canvas Element    
}

function draw() {
//Clear Canvas
ctx.clearRect(0,0,clearX,clearY);

//If image is <= Canvas Size
if (imgW <= CanvasXSize) {
    //reset, start from beginning
    if (x > (CanvasXSize)) { x = 0; }
    //draw aditional image
    if (x > (CanvasXSize-imgW)) {
      ctx.drawImage(img, x-CanvasXSize+1, y, imgW, imgH);
    }
}
//If image is > Canvas Size
else {
  //reset, start from beginning
  if (x > (CanvasXSize)) { x = CanvasXSize-imgW; }
  //draw aditional image
  if (x > (CanvasXSize-imgW)) { ctx.drawImage(img[0],x-imgW+1,y,imgW,imgH); }
}

for(i = 0; i < img.length; i++) {
  ctx.drawImage(img[i],x,y,imgW,imgH);
  //amount to move
  x += dx;
  }
}

Answer 1

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

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     
}

此时，图像均已加载，因此请绘制图像

您可以使用context.translate和context.rotate倾斜图像。

您要做的是平移（移动）到要旋转的图像的中心。 然后从该中心点旋转。 这样，图像将绕其中心旋转。 旋转功能采用弧度角，因此您可以将度数转换为弧度，如下所示：30度= 30 * Math.PI / 180弧度

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);

花费很多精力，所以这里有示例代码和小提琴： http : //jsfiddle.net/m1erickson/t49kU/

<!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>

使用javascript滚动图片

问题描述

1 个解决方案

解决方案1
1 2013-05-06 02:01:45

使用javascript滚动图片

问题描述

1 个解决方案

解决方案1 1 2013-05-06 02:01:45

解决方案1
1 2013-05-06 02:01:45