0

这个问题最好用 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);

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

这一点可以通过在单独的 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);

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

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

4

1 回答 1

2

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

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

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

于 2013-07-04T02:58:47.837 回答