在一个画布中放入2个以上的图像时出错?

时间:2012-04-05 09:14:56

标签: javascript html5 canvas

情景: -  我正在尝试使用手机间隙框架制作iPhone应用程序,使用HTML 5 Canvas我试图将图像放在画布中,但它给出了一个奇怪的错误“draw(匿名函数)onload”。请帮我解决一下情况。 是否有可能在一个画布中放入我想要的图像?请建议背后的方法??

<!DOCTYPE HTML>
 <html>
<head>
    <title>TestingCanvas</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-                    scale=1.0, maximum-scale=1.6" />   
    <meta name="apple-mobile-web-app-capable" content="YES" />
    <link rel="stylesheet" href="main.css" />
    <!--<script type="text/javascript" src="phonegap-1.0.0.js"></script>-->
    <!--<script type="text/javascript" src="main.js"></script>-->
        <style type="text/css" media="screen">
        canvas,img { 
            display:block; 
            margin:0px auto; 
            border:1px solid black;
        }
        canvas { 
            background:url(Images/chooser-2x2-background.png);
        }
        </style>

    <script>
        function draw()
        {   
            var canvas = document.getElementById("mycanvas");
            var ctx=canvas.getContext("2d");

            var img1 = new Image();
            img1.src = "Images/Icon-Help.png";
            img1.onload = function(){
                ctx.drawImage(img1,15,10);
            }

            var img2 = new Image();
            img2.src = "Images/Icon-Route.png";
            img2.onload = function(){
                ctx.drawImage(img2,250,10);
            }   
            var img3= new Image();
            img3.src = "Image/Icon-Call.png";
            img3.onload = function(){
            alert('lolkyb');
                ctx.drawImage(img3,400,10);
            }

            var img4= new Image();
            img4.src = "Image/Icon-Weather.png";
            img4.onload = function(){
                ctx.drawImage(img4,600,10);
            }


        </script> 
</head>
<body onload="draw()">
    <div id="canvasArea">
        <canvas id="mycanvas" width="4096 " height="300" ></canvas>
        <!--<img style="display:none" src="Images/Icon-Assist.png" id="Assist"  />
         <img style="display:none" src="Images/Icon-Trip.png" id="Trip" />
         <img style="display:none" src="Images/Icon-Training.png" id="Training" />
         <img style="display:none" src="Images/Icon-Map.png" id="Map" />
         <!--<img style="display:none" src="Images/chooser-2x2-background" width="160" height="420" id="frame"> -->
    </div>
</body>

给出错误: -  画(匿名函数) 负载 !! 请帮助我...提前谢谢:)*

1 个答案:

答案 0 :(得分:4)

添加}以关闭draw功能。