使用Javascript的HTML5画布幻灯片_Javascript_Html5 Canvas

使用Javascript的HTML5画布幻灯片

javascript html5-canvas

使用Javascript的HTML5画布幻灯片,javascript,html5-canvas,Javascript,Html5 Canvas,我不确定我的问题到底出在哪里，我对画布和JavaScript都比较陌生，所以我很抱歉这一点非常模糊，但我无法让我的幻灯片画布正常工作，更不用说显示图像了 <!DOCTYPE html> <html> <head> <title>PhotoGenesis</title> <LINK REL=StyleSheet HREF="homecss.css" TYPE="text/css" MEDIA=screen> <scri

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


光生
var lightbox=“lightbox”（“+”0“+”）；
文件。填写（“”）；
函数预加载程序（）
{
//柜台
var i=0；
//创建对象
imageObj=新图像（）；
//设置图像列表
images=新数组（）；
图像[0]=“background1.png”
图片[1]=“background2.png”
图片[2]=“background3.png”
//开始预加载
对于（i=0；i
我很确定在画布上绘制图像时尚未加载图像。尝试类似的方法，我不确定这是正确的代码，因为我没有获得代码的所有部分，但在将图像绘制到画布上之前，您必须使用image.onload函数。我可以将脚本的其余部分合并到缓冲区，然后更改第二个函数吗听你的建议？你应该稍微修改一下，现在你有了建议，试着让事情顺利进行。如果你仍然没有做到，那么就回来相应地编辑你的答案
sprite.onload = function() {
  ctx.drawImage(sprite,0,0);
}