canvas學習筆記——關於css設置canvas畫布大小的問題

canvas的繪製會是畫布大小爲準的。canvas的默認畫布大小爲300×150。

通常，我們可能想要改變畫布的大小，以下是大家最容易想到的方法：

//方法一：內聯樣式
<canvas style="width:450px;height:300px;"></canvas>
//方法二：內部樣式
<style type="text/css">
    #myCanvas {
        width: 450px;
        height:300px;
    }
</style>
...
<canvas id="myCanvas"></canvas>
//方法三：外部樣式
canvas.css代碼
#myCanvas {
    width: 450px;
    height:300px;
}
引入html中
<link rel="stylesheet" href="canvas.css" />
...
<canvas id="myCanvas"></canvas>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

但是，執行代碼後，卻得不到我們想要的結果，如：

<style type="text/css" media="screen">
    #myCanvas {
        background-color: #ccc;
        width: 450px;
        height: 300px;
    }
</style>
<canvas id="myCanvas"></canvas>
<script>
    var context=document.getElementById("myCanvas").getContext("2d");
    context.fillStyle = "red";
    context.fillRect(0,0,100,100);
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

按照我們的想法，至少畫布內有個背景色爲紅色的正方形，但是，事實上卻不是這樣的： 
 
很顯然，紅色部分並不是一個正方形，而是一個矩形。

這是因爲，使用css設置畫布的大小會導致畫布按比例縮放你設置的值。（css只是設置canvas在屏幕的顯示大小）

上述例子中，用css設置的width爲450，height爲300，對應默認的畫布大小300×150，寬高比例分別爲1.5和2，所以我們設置的矩形的寬（100px）高（100px）實現顯示的會是寬：100px×1.5=150px；高：100px×2=200px；測量如下爲： 
 

那麼如何來改變canvas的默認大小呢？

//方法一
<canvas width="450px" height="350px"></canvas>
//方法二：通過js實現
<canvas id="myCanvas"></canvas>
...
<script>
    var ele = document.getElementById("myCanvas);
    ele.width="450";//注意：沒有單位
    ele.height="300";//注意：沒有單位
    var context= ele.getContext("2d");
    context.fillStyle="red";
    context.fillRect(0,0,100,100);
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

上述設置的結果就是，會在畫布上出現一個邊長爲100px的正方形。

設置畫布大小後，樣式會重置。

通過canvas元素的getContext方法來獲取其上下文，但是有一點需要注意的是，getContext是DOM對象的方法，也就是原生js方法，不能用jQuery對象直接獲取。

轉自：http://blog.csdn.net/csm0912/article/details/52963240