Прокрутка изображений с помощью javascript

Я написал javascript, который должен прокручивать изображения по экрану с помощью холста. Я не могу заставить это работать и буду признателен за любую помощь. Я смог заставить это работать с использованием одного изображения и без массива, но я хочу иметь возможность использовать массив и загружать картинки один за другим с небольшим пространством между ними.Прокрутка изображений с помощью javascript

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

источник

2013-05-05 Dustin Barry

Каким образом это не работает? Создайте [JSFiddle] (http://jsfiddle.net/) со своим JavaScript и соответствующими HTML и CSS, чтобы мы могли видеть, что происходит и экспериментировать. – doppelgreener

Вот ссылка на JSFiddle http://jsfiddle.net/dmbarry/CJXzL/ –

Примечание: 'var img = new Array [];' должно быть 'var img = new Array();' (обратите внимание на скобки) или просто 'var img = [];' (эти два [идентичны в этом случае] (http://stackoverflow.com/q/931872/254830)). Это вызвало синтаксическую ошибку. – doppelgreener

Чтобы иметь несколько изображений загружается, когда вы нуждаетесь в них, вам следует использовать код изображения прелоадер:

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 to ti Это ваши изображения.

Что вы делаете, переводите (перемещаете) в центр изображения, который хотите повернуть. Затем сделайте поворот от этой центральной точки. Таким образом изображение будет вращаться вокруг его центра. Поворота функция принимает радианах угол, так что вы можете перевести градусы в радианы, как это: 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>

источник

2013-05-06 02:01:45 markE

Прокрутка изображений с помощью javascript

ответ

Смежные вопросы