Question

我是新手 - 我无法弄清楚为什么这不起作用。当我从HTML中删除Display：none时，图像正常工作，因此我知道图像的路径是正确的。但它并没有画在画布上。谢谢你的时间。

HTML：

<canvas width="840" height="900" id="Canvas6">
     Your browser does not support this feature.
    </canvas>
<img src="image/logo.png" id="img1" width="825" height="272" style="display:none;">
<script type="text/javascript" src="js/main.js"></script>

Main.JS JAVASCRIPT：

var theCanvas = document.getElementById('Canvas6');

if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {

        //Create a variable to hold our image
        var  srcImg = document.getElementById("img1");

        //Draw an image directly onto the canvas
        ctx.drawImage(srcImg, 0,0);

        //Draw a scaled down image
        //drawImage(srcImg, dx, dy, dw, dh)


    }
}

Answer 1

在html文件中，您要做的第一件事就是在html文件末尾使用'script'标记。这样可以确保“关键渲染时间”最短，并且首先显示HTML中的显示项。（对这种情况影响不大，因为这里使用的是JS进行绘制/显示，但是当您将JS用于其他目的（例如计算等）时，这种方法非常好，而且您不想停止其他方法由于正在进行计算而无法显示HTML项。）

现在画布已准备就绪，是时候将图像扔到画布上了。

尝试使用border属性（style =“ border：2px点缀黑色”）查看画布的容器区域。

嗯！但是图像不会显示在画布上。为什么？

图像（或任何其他文件）至少需要一段时间才能得到处理。在处理它们以将它们加载到屏幕上时，您的画布已经显示出来。因此，您会看到一块空的画布。

因此，解决方案是让其他所有内容等待，直到加载图像为止。

我们该怎么做？只需使用“事件监听器”。

EventListener是Window对象的属性。（window.addEventListener（“ load”，some_func_to_run，false）;）。通常，当我们希望窗口/页面/浏览器等待某些东西时，通常会使用它，但是，我们也可以将其用于图像。

var cvs = document.getElementById("canvas"); // Getting the control of the canvas
var ctx = cvs.getContext("2d"); //Getting the control of the useful HTML object getContext . This object brings in a lot of useful methods like drawImage, fillRect etc. 


//create images

var bg = new Image(); // Creating image objects
bg.src = "images/bg.png"; //Setting the source file

//create images ends


//load images first
bg.addEventListener("load" , draw , false); //**IMPORTANT : Just remove this line and you will start facing this problem of empty canvas again 

//loading images ends

function draw() {
    ctx.drawImage(bg,0,0);   // Putting the image and its coordinates on the canvas  
}

draw();  // Calling the draw function to put the image on canvas

<html>
   <body>
           <canvas id="canvas" width="288" height="512" style="border: 2px dotted black">            </canvas>
           <script src="flappyBird.js"></script>
   </body>
</html>

所以，这全都涉及使用事件监听器并要求所有内容等待直到图像加载完毕。

希望此帮助。：）

Answer 2

如果您尝试在加载之前将图像放置在Canvas上，它将不会显示。它不像img标签，只要它加载就会显示图像。我用一个onload包围你的JS，它对我有用。

document.getElementById("img1").onload = function() { /* Your JS */ };

Answer 3

您必须先等待图像加载才能在画布上绘制，因此请将绘图代码设置为在窗口加载事件上运行（此时所有图像都会加载）。此外，您不需要在页面上包含图像的标记，然后您必须在该页面上禁止使用CSS显示图像。您只需创建图像对象并在javascript中设置source属性即可。例如：

var img = document.createElement('img');
img.src = 'image/logo.png';
window.addEventListener('load', function(){ 
    var theCanvas = document.getElementById('Canvas6');
    if (theCanvas && theCanvas.getContext) {
        var ctx = theCanvas.getContext("2d");
        if (ctx) {
                ctx.drawImage(img, 0,0);
        }
    }
});

简单的HTML5画布图像不显示

3 个答案: