Html 图像未出现在画布中_Html_Canvas

Html 图像未出现在画布中

html canvas

Html 图像未出现在画布中,html,canvas,Html,Canvas,我正在尝试在我的HTML5画布上加载一个图像。我正在遵循一个教程，我做的每件事都很精确我的控制台打印“图像加载”，所以我知道它找到了png文件。但是，屏幕上没有显示任何内容我尝试过调整画布的大小，并试图使图像显示在不同的坐标上，但没有效果 <body> <canvas id="my_canvas"></canvas> </body> <script> var canvas = null; var conte

我正在尝试在我的HTML5画布上加载一个图像。我正在遵循一个教程，我做的每件事都很精确

我的控制台打印“图像加载”，所以我知道它找到了png文件。但是，屏幕上没有显示任何内容

我尝试过调整画布的大小，并试图使图像显示在不同的坐标上，但没有效果

<body>
    <canvas id="my_canvas"></canvas>
</body>

<script>
    var canvas = null;
    var context = null;
    var basicImage = null;



    var setup = function() {

        // Set up canvas
        canvas = document.getElementById("my_canvas");
        context = canvas.getContext('2d'); // lets us modify canvas visuals later
        canvas.width = window.innerWidth; // 1200
        canvas.height =  window.innerHeight; // 720

        // Load an image
        basicImage = new Image();
        basicImage.src = "bb8.png";
        basicImage.onload = onImageLoad();
    }

    var onImageLoad = function() {
        console.log("image loaded");
        context.drawImage(basicImage, 0, 0);
    }

    setup();
</script>


var=null；
var-context=null；
var basicImage=null；
var setup=function（）{
//设置画布
canvas=document.getElementById（“我的画布”）；
context=canvas.getContext（'2d'）；//允许我们以后修改画布视觉效果
canvas.width=window.innerWidth；//1200
canvas.height=window.innerHeight；//720
//加载图像
基本图像=新图像（）；
basicImage.src=“bb8.png”；
basicImage.onload=onImageLoad（）；
}
var onImageLoad=函数（）{
console.log（“图像加载”）；
drawImage（basicImage，0,0）；
}
设置（）；

不要在

basicImage.onload

上绘制图像，而是在

窗口.onload

var setup = function() {

    // Set up canvas
    canvas = document.getElementById("my_canvas");
    context = canvas.getContext('2d'); // lets us modify canvas visuals later
    canvas.width = window.innerWidth; // 1200
    canvas.height =  window.innerHeight; // 720

    // Load an image
    basicImage = new Image();
    basicImage.src = "bb8.png";
}
 window.onload  = function() {
    console.log("image loaded");
    context.drawImage(basicImage, 0, 0);
}

setup();