个人中心
gpt4 book ai didi

javascript - 使用javascript滚动图片

转载 作者：行者123 更新时间：2023-11-28 02:16:05 24 4
gpt4 key购买 nike

我编写了一个 javascript，应该使用 Canvas 在屏幕上滚动图片。我无法让它发挥作用，希望得到任何帮助。我能够使用一张图片而不使用数组来实现此目的，但我希望能够使用数组并加载一张又一张的图片，并且图片之间的间距很小。

Here's a JSFiddle with my code .

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

最佳答案

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

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 来倾斜图像。

您要做的就是平移(移动)到要旋转的图像的中心。然后从该中心点进行旋转。这样图像就会绕其中心旋转。旋转函数采用弧度 Angular ，因此您可以将度数转换为弧度，如下所示: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);

有很多事情需要你思考，所以这里是示例代码和 fiddle :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 - 使用javascript滚动图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16389906/

24 4 0
文章推荐： javascript - 带坐标的 HTML5 拖放
文章推荐： c++ - 从 Canny 检测和标记端点
文章推荐： javascript - 在无序列表中单击加号图标时没有控制台日志输出
文章推荐： javascript - 如何使用 Html5 地理定位链接到 google map 打印方向？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com