Question

用visibility: hidden;设置样式的画布应该在一秒钟之后显示窗口大小，对吧？

var canvas = document.getElementById("myCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// draw on canvas.getContext("2d") ...
window.setTimeout(function() {
  canvas.style.visibility = "visible";
}, 1000);

适用于IE11，但不适用于Chrome32（在Windows7上运行） （Phew，我从来没有找到适用于IE但不适用于Chrome的内容！）

我尝试使用display: none;和canvas.style.display= "block";来隐藏和显示画布并获得相同的行为。

以下是测试：http://jsfiddle.net/CX49R/

奇怪的是，在使用Chrome的jsfiddle中，在您将鼠标移到文档区域之后（当然，在调用setTimeout触发的功能之后），会出现画布（及其绘制的内容）。但是，如果相同的HTML + CSS + JS代码在单个Chrome选项卡/窗口中运行，则不会出现（除非您通过“Inspect element”打开“开发工具”，或者单击文档区域）。

我在这里缺少什么？我试图将代码减少到原始方案的最小值。

Answer 1

似乎它与canvas元素有某种关系。创建一个隐藏的父div并显示而不是canvas元素似乎解决了这个问题：

http://jsfiddle.net/CX49R/2/

<div id="wrapper">
   <canvas id="myCanvas">Your browser does not support canvas.</canvas>
</div>

Answer 2

我没有足够的声誉发表评论，所以我会给你一个答案。问题不在于setTimeout，问题在于canvas.style.visibility = "visible";。我在你的超时时间设置了一个警报，并在一秒后解雇，没问题。我唯一的猜测是canvas.style.visibility正在等待鼠标事件触发它自己。

隐形/隐藏画布不会显示在Chrome中

2 个答案: