本文介绍了调整 HTML5 画布大小以适应窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
如何自动缩放 HTML5 <canvas> 元素以适应页面?
How can I automatically scale the HTML5 <canvas> element to fit the page?
例如，我可以通过将 height 和 width 属性设置为 100% 来使 <div> 进行缩放，但是<canvas> 不会缩放，对吗?
For example, I can get a <div> to scale by setting the height and width properties to 100%, but a <canvas> won't scale, will it?
推荐答案
我相信我已经找到了一个优雅的解决方案:
I believe I have found an elegant solution to this:
JavaScript
/* important! for alignment, you should make things
* relative to the canvas' current width/height.
*/
function draw() {
var ctx = (a canvas context);
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
//...drawing code...
}
CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
}
到目前为止，对我的性能没有任何大的负面影响.
Hasn't had any large negative performance impact for me, so far.
这篇关于调整 HTML5 画布大小以适应窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！