Html5—Canvas之如何自适应屏幕大小

最新推荐文章于 2023-04-18 11:03:22 发布

转载最新推荐文章于 2023-04-18 11:03:22 发布 · 578 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/U5B89/p/9667214.html

本文介绍了两种在网页中创建并调整Canvas元素尺寸的方法，确保其能够根据屏幕实际可用宽度和高度进行适配，避免了外部CSS可能引起的拉伸问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只有内嵌css有效，外部css会出现拉伸的情况，
所以有两种方案

var myCanvas = "<canvas id='myCanvas' width='" + screen.availWidth + "px' height='"+ screen.availHeight + "px'></vanvas>";
document.body.insertAdjacentHTML("beforeEnd", myCanvas);
或者这种做法
var myCanvas = document.createElement("canvas");
myCanvas.setAttribute("width", screen.availWidth);
myCanvas.setAttribute("height", screen.availHeight);
myCanvas.setAttribute("id", "myCanvas");
document.body.appendChild(myCanvas);
两种方案的共性都是在把元素添加进DOM前设置他的大小

转载于:https://www.cnblogs.com/U5B89/p/9667214.html