Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/79.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 画布drawImage不工作_Javascript_Html_Canvas - Fatal编程技术网

Javascript 画布drawImage不工作

Javascript 画布drawImage不工作,javascript,html,canvas,Javascript,Html,Canvas,这幅画画不到画布上。它正在加载,当body.appendChild(img)时我看到它;被称为。有人知道为什么它不在画布上显示吗?我正在遵循udacity上html5课程的代码示例。谢谢你的帮助 <!DOCTYPE html> <html> <head> <title>First Game</title> <meta http-equiv="Content-T

这幅画画不到画布上。它正在加载,当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>

第一局
var帆布;
var-ctx=null;
var-img=null;
var body=null;
设置=函数(){
body=document.getElementById(“body”);
canvas=document.createElement(“canvas”);
ctx=canvas.getContext('2d');
//setAttribute(“类”、“canvasMain”);
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
body.appendChild(画布);
img=新图像();
img.onload=onImageLoad();
img.src=http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
};
onImageLoad=函数(){
log(“图像已加载”);
附肢儿童(img);
ctx.drawImage(img,0,0);
};
设置();

onImageLoad()如果包含括号,则执行的是函数

就是这么简单!非常感谢。
img.onload = onImageLoad;