javascript - Canvas 尺寸问题

Question

我正在尝试使用 Canvas 作为我的网页的标题，我想画一些类似于天空的东西，但由于我的 Canvas 被拉伸(stretch)了，我的内容也被拉伸(stretch)了。

是否可以使用具有这些尺寸的 Canvas 并仍然获得正确的比例？

http://jsfiddle.net/ja98N/

如有任何帮助，我们将不胜感激。

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

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

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

Answer 1

这将解决问题。我只在您的 Javascript 代码中添加了 2 行:

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();
}

在这里 fiddle :http://jsfiddle.net/z2YdL/2/