无法在特定大小的画布上绘图答案

【问题标题】：Can't draw on canvas of a certain size无法在特定大小的画布上绘图
【发布时间】：2012-12-15 06:46:02
【问题描述】：

由于某种原因，如果以下代码中的第二个画布的高度超过 526 像素，Chrome 中将不会对其进行任何绘制。只要 height

<!doctype html>
<html>
  <head>
 <script type="text/javascript">

function init()
{
    var canv = document.getElementById("myCanvas");
    var ctx = canv.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, canv.width, canv.height);
}

</script>
<style type="text/css">
canvas {border: 1px solid black; }
</style>
</head>
<body onload="init()">
<canvas id="mainFrame" width="700" height="700"></canvas>
<canvas id="myCanvas" width="125" height="527"></canvas> <!-- cannot exceed
526 ... WHY? -->
</body>
</html>

【问题讨论】：

如果降低第一个画布的高度并在第二个画布上设置高度 > 526px 会发生什么？我还没有听说过任何像素限制，可能是因为您在视口之外进行绘画，因此部分未绘画/根本没有绘画。
更改第一个画布的高度似乎没有帮助，但完全删除它确实可以解决问题
我注意到在 CSS 中添加 : #myCanvas{} 可以解决您的问题。但当然不是一个好的解决方案..
有趣...不知道为什么，但这肯定有帮助！谢谢！
我发现了一个几乎相同问题的帖子：stackoverflow.com/questions/13857518/… 它看起来像是 chrome 或 webkit for windows 中的一个错误。

标签： html google-chrome canvas

【解决方案1】：

我在 win7 x64 上的 chrome v.24.0.1312 上试过这个，它可以正常工作，尝试更新到最新版本的浏览器。

【讨论】：