html5 Canvas 如何自适应屏幕大小?

 我来答
一片墨痕一片
推荐于2019-09-23 · TA获得超过1823个赞
知道答主
回答量:17
采纳率:100%
帮助的人:1.4万
展开全部

用JS调制屏幕大小。

1.CSS 方面:去掉所有元素的外间距、内边距,html 和 body 宽高设为 100%,canvas 元素 display 设为 block。

2.JS 方面:监听窗口的 resize 事件,在窗口大小改变的同时调整 canvas 的大小。

3.完整代码这里我们使用 jQuery 来处理窗口尺寸改变事件响应,以及属性设置。

4.同时使用 $(window).get(0).innerHeight 获取窗口高度,而不是 $(window).height()。是因为后者效果并不完美,无法返回所有浏览器窗口的完整高度值,这样浏览器窗口中 canvas 元素和滚动条的四周可能会仍存在白色区域。

5.代码公式:<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="jquery-3.1.1.js"></script><style>* {margin: 0;padding: 0;}html, body {height: 100%;width: 100%;}canvas {display: block;background: #D6F8FF;}</style><script type="text/javascript">$(function() {//添加窗口尺寸改变响应监听$(window).resize(resizeCanvas);//页面加载后先设置一下canvas大小resizeCanvas();})//canvasfunctionresizeCanvas{$("#myCanvas").attr("width"$(window).get(0).innerWidth);$("#myCanvas").atr("height", $(window).get(0).innerHeight);};</script></head<body<canvas id="myCanvas" width="400" height="200"></body>。

</html>

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式