Question

用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);

并且您将在每次首次加载时看到矩形。

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

Answer 1

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

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

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

为什么第一次加载失败，但后续加载有效？

1 个答案: