javascript - 如何将 HTML5 Canvas 缩放到包装它的容器的大小？-6ren

javascript - 如何将 HTML5 Canvas 缩放到包装它的容器的大小？

转载作者：可可西里更新时间：2023-11-01 13:14:36

<分区>

目前我有一个固定大小的 HTML5 Canvas ，如下所示:

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

但是我希望能够缩放 Canvas ，使其与其周围的容器大小相同，显然它仍然必须保持相同的纵横比。我还希望它是流动的，这样如果用户调整浏览器的大小， Canvas 就会随流动容器一起缩放。

例如，如果我的容器设置为 500 像素的宽度，那么 Canvas 的宽度将缩放到相同的大小。例如:

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

例如， Canvas 的宽度为 500px 以匹配容器，高度将自动设置为 357px，以保持相同的纵横比。

我相信这可以用一些 javascript 来实现，我只是不知道该怎么做......我希望我已经提供了足够的信息供某人帮助我。如果有人可以创建一个 jsfiddle 并提供一些示例代码(如果可能的话)，我们将不胜感激。

谢谢。

文章推荐： html - 创建全屏 div

可可西里

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章