0

問題がどこにあるのか正確にはわかりません。キャンバスとJavaScriptの両方に比較的慣れていないため、これが非常にあいまいな場合は申し訳ありませんが、スライドショーキャンバスを機能させることができず、画像を表示することもできません。

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

1 に答える 1

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

キャンバスに画像を描画するとき、画像はまだ読み込まれていないと確信しています。コードのすべての部分を取得できなかったため、これが正しいコードかどうかはわかりませんが、キャンバスに描画する前に image.onload 関数を使用する必要があります。

于 2012-05-31T11:55:16.370 に答える