I'；我无法在html5的画布上获得图像，该怎么办？_Html_Image_Html5 Canvas

I'；我无法在html5的画布上获得图像，该怎么办？

html image html5-canvas

I'；我无法在html5的画布上获得图像，该怎么办？,html,image,html5-canvas,Html,Image,Html5 Canvas,我已经从我的学校检查了这段代码，在那里它运行良好但当我在浏览器中运行此代码时，它不起作用图像不会显示在画布中。另外，我在其他地方的w3schools浏览器中尝试了相同的代码，但在该浏览器中仍然不起作用 <!DOCTYPE html> <html> <body> <p>Image to use:</p> <img id="scream" src="flower.jpg" alt="The

我已经从我的学校检查了这段代码，在那里它运行良好

但当我在浏览器中运行此代码时，它不起作用

图像不会显示在画布中。另外，我在其他地方的w3schools浏览器中尝试了相同的代码，但在该浏览器中仍然不起作用

<!DOCTYPE html>
<html>
    <body>
        <p>Image to use:</p>
        <img id="scream" src="flower.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
        <canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">

        <script>
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            var img=document.getElementById("scream");
            ctx.drawImage(img,10,10);
        </script>
    </body>
</html>


要使用的图像：
画布：
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var img=document.getElementById（“尖叫”）；
ctx.drawImage（img，10,10）；

我会直接使用图像，而不是将其从

-标签中取出

您可能需要在加载时运行javascript，而不是直接在主体中运行。将您的javascript更改为此，它应该可以工作（至少在以下情况下可以工作）：

此外，如显式设置

窗口中所述。onload

不是一个很好的做法，因为它可能会被后续脚本覆盖，因此对于测试以外的任何内容，您都希望使用框架或

addEventListener

attachEvent

加载映像是异步的，因此，您的Javascript代码可能会在图像完成加载之前运行。正因为如此，当

ctx.drawImage（img，10，10）

被称为

img

时，它没有完整的数据，在画布上什么也没有绘制

要解决这个问题，您需要等待映像完全加载。Javascript使您能够设置一个函数，以便在图像完全加载时运行

所有依赖于图像数据的代码都应该放在

onload

回调中

function setup_canvas() {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    ctx.drawImage(img,10,10);
}

window.onload = setup_canvas;

包含修改部分的脚本：

img.onload = function(){ 
    ctx.drawImage(img,10,10);
}


var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var img=document.getElementById（“尖叫”）；
img.onload=函数（）{
ctx.drawImage（img，10,10）；
}

如果

src

是正确的，则无论图像是从html标记加载还是使用

new image（）

在Javascript中动态创建，都可以使用

onload

方法

你检查过基本知识了吗？例如，图像是否与.htm文件位于同一文件夹中。。？

img.onload = function(){ 
    ctx.drawImage(img,10,10);
}

<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    img.onload = function(){ 
        ctx.drawImage(img,10,10);
    }
</script>