JS函数调用不工作

JS function calls won't work

本文关键字：工作 函数调用 JS      更新时间：2023-09-26

我试着写一个简单的JS画布，但它不会画。如果我调用renderCanvas()从开发控制台在chrome它的工作，但不是如果我在代码中调用它。知道为什么吗?我确信照片在那里……

<!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>

使用bgReady是没有意义的，你可以这样做

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);
};
相关文章：