HTML5上的矩形畫布被拉伸

Question

我正在一個網站上工作，我嘗試使用javascript獲取HTML5畫布上的矩形。通常這是沒有問題的，但現在當我做一個矩形的寬度和高度爲10.看起來它使得一個矩形的寬度爲10，高度爲20.

我正在製作這樣的矩形：

var canvas = $("#canvas"); 
var context = canvas.get(0).getContext("2d"); 

context.fillRect(0, 0, 10, 10); 

DIV的帆布被設定爲100％的寬度，但我想給它一個固定的寬度，並且沒有幫助。

Answer 1

您需要設置一個寬度和高度在你的畫布元素上，否則這可能是某些瀏覽器的結果。

<canvas id="canvas" width="400" height="300" /> 

而且你不能用CSS設置畫布尺寸，這會拉伸畫布。

Answer 2

畫布的默認大小爲300×150

您可能正在使用這些默認設置，這將使得矩形看起來不是方形....