为什么第一次加载失败，但后续加载工作？答案

【问题标题】：Why does the first load fail, but subsequent loads work?为什么第一次加载失败，但后续加载工作？
【发布时间】：2013-07-04 10:58:47
【问题描述】：

这个问题最好用 jsFiddle 来演示。 Here is is.

所以根据这段代码：

var canvas = document.getElementById('canvas');
canvas.width = 200;
canvas.height = 150;
var context = canvas.getContext('2d');
context.rect(20,20,50,50);
context.stroke();
var image = new Image();
image.src = canvas.toDataURL("image/png");
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0, 0);

每次加载页面时，您应该会看到画布上绘制了一个矩形。然而，由于某种原因，第一页加载总是什么都不显示，一个“空白”......

可以通过在单独的 Chrome“隐身”标签中打开 jsFiddle 链接来证明这一点。您永远不会第一次看到矩形加载。刷新，但它会出现。

为了证明您确实应该在初始加载时看到一个矩形，请尝试将 jsFiddle 更新为：

var canvas = document.getElementById('canvas');
canvas.width = 200;
canvas.height = 150;
var context = canvas.getContext('2d');
context.rect(20,20,50,50);
context.stroke();
//var image = new Image();
//image.src = canvas.toDataURL("image/png");
//context.clearRect(0, 0, canvas.width, canvas.height);
//context.drawImage(image, 0, 0);

您会在每次首次加载时看到矩形。

为什么第一次加载什么都不显示？

【问题讨论】：

标签： javascript html image canvas html5-canvas

【解决方案1】：

您必须等待图像加载才能将其拖拽，并且它可以在重新加载时工作，因为它已被缓存

image.onload = function(){
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(image, 0, 0);
}

http://jsfiddle.net/hJ9WQ/1/

【讨论】：