Question

我不确定我的问题到底在哪里，我对画布和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>

Answer 1

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

我很确定你的画面在画布上画的时候还没有加载。试试这样的东西，我不确定这是正确的代码，因为我没有得到代码的每一部分，但你必须在将它绘制到画布上之前使用image.onload函数。

HTML5 Canvas幻灯片使用Javascript

1 个答案: