爲什麼我的HTML5畫布呈現比它應該更小？

我正在用canvas元素和繪圖進行操作，並且一個簡單的矩形呈現比它應該更少的像素。我無法弄清楚爲什麼 - 發生在最新的Firefox，Safari和Mobile Safari瀏覽器中。我希望這會填滿整個畫布。爲什麼我的HTML5畫布呈現比它應該更小？

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>

來源

2012-03-02 Matt H

<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)">

要修改的容器，而不是容器的風格。如果這是有道理的。

來源

2012-03-02 22:36:13

Yeesh，就在我習慣了總是使用樣式屬性...謝謝 – 2012-03-02 22:39:23

爲什麼我的HTML5畫布呈現比它應該更小？

回答

相關問題