Javascript 为什么'；是否在加载时显示图像，但在刷新时显示？

我在玩HTML5中的canvas元素，我注意到了一个奇怪的行为。在初始加载时，我显示的图像不会显示。但是，当我刷新浏览器时，它会正确显示。我用过IE9和Chrome。两者行为相同。JavaScript代码如下所示：

window.onload = load;
function load() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.fillRect(0, 0, 640, 400);
    var image = new Image();
    image.src = "Images/smiley.png";
    context.drawImage(image, 50, 50);
}

矩形两次都正确绘制，只有在浏览器刷新时才会显示微笑

---

我正在学习HTML5和JavaScript。我肯定我只是做了些蠢事，但我想不出来

图像以异步方式加载，因此只有在刷新后，才会提前加载，因为它是缓存的。通常，在调用

drawImage

时，它还没有加载。使用

onload

：

var image = new Image();
image.src = "Images/smiley.png";
image.onload = function() {
    context.drawImage(image, 50, 50);
};

---

这也发生在我身上（对我来说只有IE9），无论如何，我找到了一个简单的解决方案

将画布的背景设置为要显示的初始图像

var canvas = document.getElementById("canvas");
canvas.style.background="url('image.png')";

---

那应该行

实际上，即使仅仅使用

image.onload=function（）{}

，您仍然会遇到问题。一定要使用这种技巧（这根本不是我要说的），但要将它移到页面底部

例如，我有一个社交网站，它使用canvas来显示个人资料照片（URI存储到数据库中），并将其打印到canvas，然后覆盖一个徽标

<section id="content">
    <article id="personalbox" >
        <h2>Hi! My name is {profile_name}</h2>
        <a id="friendbutton" href=""><img src="views/default/images/friend.png" width="12" height="12" /><span>Add {profile_name} as a friend?</span></a>
        <video id="profilevideo" width="240" height="144">DEBUG: Video is not supported.</video>
        <canvas id="profilecanvas" width="240" height="144" >DEBUG: Canvas is not supported.</canvas>
        <a id="gallerytextlink" href="gallery.html" >Click to visit {profile_name} Gallery</a>
       <table id="profileinfotable1">

调试：不支持视频。
调试：不支持画布。

。。。

函数init（）{
var cvs=document.getElementById（“profilecanvas”）；
var ctx=cvs.getContext（“2d”）；
var img=新图像（）；
img.src=“uploads/profile/{profile_photo}”；
img.onload=函数（）{
//别理我，我在玩那张照片。
ctx.绘图图像（img，42，32，186，130，cvs.width/2-（186-42）/2，cvs.height/2-（130-32）/2186-42，130-32）；
drawLogo（cvs、ctx）；
}
}
功能drawLogo（cvs、ctx）{
var logo=“在此处输入徽标。”；
ctx.fillStyle=“rgba（36,36,36,0.6）”；
ctx.strokeStyle=“rgba（255255,0.3）”；
ctx.font=“粗体斜体6pt衬线”；
ctx.textAlign=“左”；
ctx.textb基线=“中间”；
ctx.save（）；
ctx.strokeText（徽标，4，cvs.height-11）；
ctx.strokeText（徽标，6，cvs.height-11）；
ctx.strokeText（徽标，4，CV.height-9）；
ctx.strokeText（徽标，6，CV.height-9）；
ctx.fillText（徽标，5，CV.height-10）；
ctx.restore（）；
}
window.onload=init；

理想情况下，这将一直放在末尾

标记之前的底部，但由于我的模板系统，我将它放得更高。显然，这给了在画布元素被绘制到屏幕并准备好接收输入后加载图像的时间

---

我不能依赖于设置画布的背景，我也不想与刷新抗衡。无论出于何种原因，仅将脚本包含在

img.onload=function（）{}

中是不够的。把它放低一点，省得你头疼。

谢谢。我知道这很简单。我刚刚意识到pimvdb可能是更好的方法。

</section>

<script type="text/javascript">
  function init() {
    var cvs = document.getElementById("profilecanvas");
    var ctx = cvs.getContext("2d");
    var img = new Image();
    img.src = "uploads/profile/{profile_photo}";
    img.onload = function() {
      // Ignore. I was playing with the photo.
      ctx.drawImage(img, 42, 32, 186, 130, cvs.width/2 - (186-42)/2, cvs.height/2 - (130-32)/2, 186-42, 130-32);
      drawLogo(cvs,ctx);
    }
  }

  function drawLogo(cvs,ctx) {
    var logo          = "Enter Logo Here.";
    ctx.fillStyle     = "rgba(36,36,36,0.6)";          
    ctx.strokeStyle   = "rgba(255,255,255,0.3)";
    ctx.font          = "bold italic 6pt Serif";
    ctx.textAlign     = "left";
    ctx.textBaseline  = "middle" ;

    ctx.save();
    ctx.strokeText(logo, 4, cvs.height-11);
    ctx.strokeText(logo, 6, cvs.height-11);
    ctx.strokeText(logo, 4, cvs.height-9);
    ctx.strokeText(logo, 6, cvs.height-9);
    ctx.fillText(logo, 5, cvs.height-10);
    ctx.restore();
  }

  window.onload = init;
 </script>