缩放canvas元素并保持高宽比 [英] scaling a canvas element and keeping the aspect ratio

问题描述

我有一个简单的html5页面与一个尺寸的canvas元素。现在我想要的canvas元素总是缩放与可用的大小从页面，但仍保持一定的长宽比。

也如何获得当前的缩放因子

解决方案

如果w是你的宽度和h你的高度。
w / h是您的比率。

现在您的页面宽度更大或更小。
假设你的新宽度名称是newW。
你正在搜索newH。

要保持你的比率只是做数学：
newH = newW /（w / h） p>

要获取宽度和高度，只需使用document.getElementById（canvas）。width / height

i have a simple html5 page with a canvas element at a certain size. now i want that the canvas element always scales with the available size from the page but still keeps a certain aspect ratio.

also how can i get the current scale factor of the canvas element in javascript code?

thanks!

解决方案

If w is your width and h your height. w/h is your ratio.

Now your page width is bigger or smaller. Let's say your new width name is newW. And you are searching newH.

To keep your ratio just do the math : newH = newW / (w/h);

To get your width and height just use a document.getElementById("canvas").width/height

这篇关于缩放canvas元素并保持高宽比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！