我正在尝试使用 Canvas 作为我的网页的标题,我想画一些类似于天空的东西,但由于我的 Canvas 被拉伸(stretch)了,我的内容也被拉伸(stretch)了。
是否可以使用具有这些尺寸的 Canvas 并仍然获得正确的比例?
如有任何帮助,我们将不胜感激。
body{
background-color:black;
margin:0px;
}
#sky{
background: aqua;
height: 70px;
}
#myCanvas{
width: 100%;
height: 100%;
}
最佳答案
这将解决问题。我只在您的 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/
关于javascript - Canvas 尺寸问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23082664/