자바 스크립트를 사용하는 HTML5 캔버스 슬라이드 쇼

내 이슈가 어디에 있는지 나는 잘 모르겠다. 캔버스와 자바 스크립트에 비교적 익숙하기 때문에 매우 애매하지만 미안하지만 내 슬라이드 쇼 캔버스를 작동시키지 못한다면 단독으로 이미지를 표시합니다.자바 스크립트를 사용하는 HTML5 캔버스 슬라이드 쇼

<!DOCTYPE html> 

<html> 
<head> 
<title>PhotoGenesis</title> 
<LINK REL=StyleSheet HREF="homecss.css" TYPE="text/css" MEDIA=screen> 
<script type="text/javascript" src="homescript.js"></script> 
</head> 

<body onLoad="javascript:preloader()"> 
<header> 
    <a href=http://localhost.com/home><img id=logo alt="PhotoGenesis" src="logo.png""/>   </a> 
    <nav id=headernav>   
     <a href=http://localhost.com/home>home</a> 
     <a href=http://localhost.com/news>news</a> 
     <a href=http://localhost.com/photography>photography</a> 
     <a href=http://localhost.com/video>video</a> 
     <script type="text/javascript"> 
      var lightbox="lightbox ("+"0"+")"; 
      document.write("<a href=http://localhost.come/lighbox>" + lightbox + "</a>");    
     </script> 
     <a href=http://localhost.com/about>about</a> 
     <a href=http://localhost.com/contact>contact</a> 
     <a href=http://localhost.com/blog>blog</a> 
    </nav> 
    <span id=search></span> 
    <img id=miscone alt="Full Screen" src="miscone.png"/> 
    <img id=misctwo alt="Share" src="misctwo.png"/> 
</header> 
<main onLoad="javascript:canvasslider()"> 
    <canvas id="defaultbackground" width=100%; height=100%;/>  
</main> 
<footer> 
      <nav id="footernav"> 
       <a href=http://www.facebook.com><img id="fbnav" alt="Facebook" src="fbooknav.png"/></a> 
       <a href=http://www.twitter.com><img id="tnav" alt="Twitter" src="twitternav.png"/></a> 
       <a href=http://www.stumbleupon.com><img id="snav" alt="StumbleUpon" src="stumblenav.png"/></a> 
      </nav> 
</footer> 
</body> 
</html> 

<script language="JavaScript"> 
function preloader() 
{ 

    // counter 
    var i = 0; 

    // create object 
    imageObj = new Image(); 

    // set image list 
    images = new Array(); 
    images[0]="background1.png" 
    images[1]="background2.png" 
    images[2]="background3.png" 

    // start preloading 
    for(i=0; i<=images.length; i++) 
    { 
      var backstring ="background"+i+".png"; 
     images[i].id=backstring; 
      imageObj.src=images[i]; 
    } 

} 

function canvasslide() 
{ 
    function init() 
    { 
     defaultbackground = document.getElementById("defaultbackground"); 
     ctx = defaultbackground.getContext("2d"); 
      for(i=0; i<=images.length; i++){ 
       var backstring ="background"+i+".png"; 
       sprite = document.getElementById(backstring); 
       ctx.drawImage(sprite,0,0);} 
     } 
} 
</script>

출처

2012-05-31 Landon Carpenter

sprite.onload = function() { 
    ctx.drawImage(sprite,0,0); 
}

은 당신이 캔버스에 그릴 때 이미지가 아직로드되지 확신 해요. 이런 식으로 해보십시오. 코드의 모든 부분을 얻지 못했기 때문에 올바른 코드인지는 모르겠지만 캔버스에 그리기 전에 image.onload 함수를 사용해야합니다.

출처

2012-05-31 11:55:16 jazzytomato

나머지 스크립트를 버퍼에 병합하고 두 번째 기능을 제안 사항으로 변경할 수 있습니까? –

당신은 약간의 바이올린을 만들어야합니다. 그래도 할 수 없다면 다시 돌아와 답변을 수정하십시오. – jazzytomato

자바 스크립트를 사용하는 HTML5 캔버스 슬라이드 쇼

답변

관련 문제