JS関数呼び出しは機能しません

-2

シンプルなJSキャンバスを作成しようとしましたが、描画しませんでした。私がDev ConsoleからchromeでrenderCanvas（）を呼び出すと、それは動作しますが、コードで呼び出すと動作しません。なぜどんなアイデア？私は絵があることを確信している...JS関数呼び出しは機能しません

<!DOCTYPE html> 
<html> 
<head> 
    <title>JSolitaire</title> 
</head> 
<body> 
    <canvas id="canvas" width="640" height="480"></canvas> 
    <script> 
    renderCanvas(); 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    var bgReady = false; 
    var bgImage = new Image(); 
    bgImage.src = "background.png"; 
    bgImage.onload = new function(){ 
     bgReady = true; 
    }; 

    function renderCanvas(){ 
     if(bgReady) 
      ctx.drawImage(0, 0, bgImage); 
    }; 
    </script> 
</body> 
</html>

出典

2016-07-01 user3450456

なぜ' new'キーワードを行うことができますbgReadyを使用することのない点はありませんか？ – trincot

最初の呼び出しとしてrenderCanvsがあり、バックグラウンドの読み込みも開始していません。画像がロードされるのを待たなければならないので、onload関数にrenderCanvasを入れてみてください。 – Blindman67

あなただけfunction` `前にこの

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var bgImage = new Image(); 
bgImage.src = "background.png"; 
bgImage.onload = function() { 
    renderCanvas(); 
}; 
function renderCanvas() { 
    ctx.drawImage(bgImage, 0, 0); 
};

出典

2016-07-01 20:42:29 WinterCore

これはうまくいきますが、bgImageをdrawImageの1番目のパラメータとして追加しなければなりませんでした：ctx.drawImage（bgImage、0、0）; – Airborne

ちょうど、それはctx.drawImage（image、dx、dy）でなければならない関数をチェックしました。ありがとうございます。 – WinterCore

@WinterCore。うわー、あなたはそれがコンソールからうまくいったと教えてくれましたか？どのようにすることができますか？ – trincot

JS関数呼び出しは機能しません

答えて

関連する問題