【问题标题】:Canvas drawImage is Not Working画布 drawImage 不工作
【发布时间】:2013-09-07 12:32:30
【问题描述】:

此图片不会绘制到画布上。它正在加载,我在 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>

【问题讨论】:

    标签: javascript html canvas


    【解决方案1】:
    img.onload = onImageLoad;
    

    不是onImageLoad();,如果您包含括号,则您正在执行该函数

    【讨论】:

    • 真的就是这么简单!谢谢!
    猜你喜欢
    • 2012-03-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-02-15
    • 1970-01-01
    • 2018-09-22
    • 1970-01-01
    • 2016-06-15
    相关资源
    最近更新 更多