Question

我正在玩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。我确定我只是在做一些愚蠢的事，但我无法弄明白。

Answer 1

图像是异步加载的，所以只有在刷新之后才能加载足够早，因为它是缓存的。通常情况下，在您拨打drawImage时尚未加载。使用onload：

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

Answer 2

这也发生在我身上（仅适用于IE9），无论如何，我找到了一个简单的解决方案。

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

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

这应该有用！

Answer 3

实际上，即使只使用image.onload = function() {}，您仍然会遇到问题。请使用这种技术（这根本不是我所说的），而是将其移到页面底部。

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

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

...

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

理想情况下，这会在结束</body>标记之前一直显示在底部，但是由于我的模板系统，我把它提高了。显然，这会在将canvas元素绘制到屏幕并准备接收输入后为图像提供加载时间。

我不能依赖于设置画布的背景，我不想与刷新竞争。无论出于何种原因，只包含img.onload = function() {}的脚本是不够的。把它向下移动，让自己免于头痛。

为什么图像不会在加载时显示，而是在刷新时显示？

3 个答案: