3

目前我有一个固定大小的 HTML5 画布,如下所示:

<div class="container">
<canvas id="example" width="350" height="250"></canvas>
</div>

但是我希望能够缩放画布,使其与周围的容器大小相同,显然它仍然必须保持相同的纵横比。我还希望它是流畅的,这样如果用户调整浏览器的大小,那么画布将随流体容器一起缩放。

因此,例如,如果我的容器设置为 500 像素的宽度,那么画布的宽度将缩放到相同的大小。例如:

<div class="container" style="width:500px;">
<canvas id="example"></canvas>
</div>

例如,画布将获得 500 像素的宽度以匹配容器,高度将自动设置为 357 像素,保持相同的纵横比。

我相信这可以通过一些javascript来实现,我只是不知道该怎么做......我希望我已经提供了足够的信息来帮助我。如果有人可以制作一个 jsfiddle 并在可能的情况下提供一些示例代码,将不胜感激。

谢谢。

4

1 回答 1

4

这是保持纵横比的基本实现:http: //jsfiddle.net/wtVX2/1/

function resizeCanvas(){
    var con = document.getElementById("container"),
        canvas = document.getElementById("canvas"),
        aspect = canvas.height/canvas.width,    
        width = con.offsetWidth,
        height = con.offsetHeight;

    canvas.width = width;
    canvas.height = Math.round(width * aspect);
}

请注意,它只是水平流动的。

jQuery 将是:

function resizeCanvas(){
    var con = $("#container"),
        canvas = $("#canvas")[0],
        aspect = canvas.height/canvas.width,
        width = con.width(),
        height = con.height();

    canvas.width = width;
    canvas.height = Math.round(width * aspect);
}

请注意,我仍然以相同的方式设置画布的宽度和高度。如果我们用 CSS 设置宽度/高度,它会拉伸/挤压像素的绘图,你会得到模糊的绘图。

于 2012-10-03T20:56:18.520 回答