Question

我正在使用canvas元素和绘图，并且一个简单的矩形渲染的像素数量应该少于它应该的数量。我无法弄清楚原因 - 发生在最新的Firefox，Safari和Mobile Safari浏览器中。我希望这能填满整个画布。

screenshot

<html>
<body>
<canvas id="draw" style="width:100px;height:100px;border:1px solid #f00;"
onClick="doDraw(event)">
</canvas>
<script>
function doDraw(ev) {
    console.log(ev.clientX,ev.clientY);
    var el = document.getElementById('draw');
    var ctx = el.getContext('2d');

    ctx.fillRect(0,0,100,100);
}
</script>
</body>
</html>

Answer 1

<canvas id="draw" style="width:100px;height:100px;border:1px solid #f00;"
onClick="doDraw(event)">

需要

<canvas id="draw" width="100" height="100" style="border:1px solid #f00;"
onClick="doDraw(event)">

您正在修改容器的样式，而不是容器。如果这是有道理的。

为什么我的HTML5画布渲染得比它应该小？

1 个答案: