logo标签列表

无法在特定尺寸的画布上绘制

htmlgoogle-chromecanvas
4

由于某种原因，如果以下代码中的第二个画布高度超过526像素，则在Chrome中不会绘制任何内容。 只要高度<527，它就可以正常工作，并且在Firefox中始终正常工作。 有人知道我做错了什么吗？ 我对HTML非常陌生，如果我有遗漏，请见谅。

<!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>
1
如果你减小第一个画布的高度，并在第二个画布上设置高度> 526px，会发生什么？我还没有听说过任何像素限制，也许是因为你正在视口外绘画，因此某些部分没有被绘制/根本没有被绘制。 - SaschaM78
更改第一个画布的高度似乎没有帮助，但是完全删除它确实可以解决问题。 - Peter Lewis
1
我注意到在你的CSS中添加：#myCanvas{}可以解决你的问题。但这当然不是一个好的解决方案。 - Cyril F
我尝试了你的jsfiddle，但在Windows 7 x64上的Chrome 23.0.1271.97 m上，我会得到一个空白的第二个画布，将高度减小到较低的值可以解决这个问题。我forked the jsfiddle，切换到使用JQuery的ready()事件，然后它就可以工作了。 - SaschaM78
我已经简化了这些小例子（实际上，在阅读评论之前，我从头开始编写了一个）。这个对你有用吗？（它总是为我绘制） - Alpha
显示剩余3条评论
1个回答
1

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接