畫布尺寸問題

Question

我試圖使用一個畫布作爲我的網頁的標題，我想繪製類似於天空的東西，但是由於我的畫布拉伸，我的內容也被拉伸。

是否可以使用具有這些尺寸的畫布並仍然獲得正確的比例？

http://jsfiddle.net/ja98N/

任何幫助將非常感激。

body{ 
    background-color:black; 
    margin:0px; 
} 

#sky{ 
    background: aqua; 
    height: 70px; 
} 

#myCanvas{ 
    width: 100%; 
    height: 100%; 
} 

Answer 1

這會解決問題。我只加2行JavaScript代碼：

var canvas = document.getElementById("myCanvas"); 

canvas.width = document.getElementById('sky').offsetWidth; 
canvas.height = document.getElementById('sky').offsetHeight; 

if (canvas.getContext) { 
    var context = canvas.getContext("2d"); 
    context.beginPath(); 
    context.arc(50, 50, 8, 0 , 2 * Math.PI); 
    context.stroke(); 
} 

小提琴這裏：http://jsfiddle.net/z2YdL/2/