畫布drawImage無法正常工作

Question

該圖片將不會繪制在畫布上。 它正在加載中，當body.appendChild（img）; 叫做。 有誰知道為什么它不顯示在畫布上？ 我正在遵循udacity的html5課程中的代碼示例。 感謝您的任何幫助！

<!DOCTYPE html>
    <html>
        <head>
            <title>First Game</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <link type="text/css" rel="stylesheet" href="TestCanvasCSS.css"/>
        </head>
        <body id="body">
            <script>
                var canvas;
                var ctx = null;
                var img = null;
                var body = null;

                setup = function() {
                    body = document.getElementById("body");
                    canvas = document.createElement("canvas");

                    ctx = canvas.getContext('2d');

                    //canvas.setAttribute("class","canvasMain");
                    canvas.width = window.innerWidth;
                    canvas.height = window.innerHeight;
                    body.appendChild(canvas);

                    img = new Image();
                    img.onload = onImageLoad();
                    img.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
                };

                onImageLoad = function() {
                    console.log("Image has loaded");
                    body.appendChild(img);
                    ctx.drawImage(img, 0, 0);
                };
                setup();
            </script>
            <!--  <script type="text/javascript" src="TestCanvas.js"> </script> -->
        </body>
    </html>

Answer 1

img.onload = onImageLoad;

不是onImageLoad(); 如果包含括號，則您正在執行該函數

畫布drawImage無法正常工作

問題描述

1 個解決方案

解決方案1
3 已采納 2013-09-07 02:40:12

畫布drawImage無法正常工作

問題描述

1 個解決方案

解決方案1 3 已采納 2013-09-07 02:40:12

解決方案1
3 已采納 2013-09-07 02:40:12