html5 Canvas 如何自适应屏幕大小?
答案:4 悬赏:0
解决时间 2021-01-26 01:42
- 提问者网友:夢醒日落
- 2021-01-25 13:42
html5 Canvas 如何自适应屏幕大小?
最佳答案
- 二级知识专家网友:底特律间谍
- 2021-01-25 14:09
可以用JS监控屏幕大小,然后调整Canvas的大小。在代码中加入JS
$(window).resize(resizeCanvas);
function resizeCanvas() {
canvas.attr("width", $(window).get(0).innerWidth);
canvas.attr("height", $(window).get(0).innerHeight);
context.fillRect(0, 0, canvas.width(), canvas.height());
};
resizeCanvas();就可以了。
$(window).resize(resizeCanvas);
function resizeCanvas() {
canvas.attr("width", $(window).get(0).innerWidth);
canvas.attr("height", $(window).get(0).innerHeight);
context.fillRect(0, 0, canvas.width(), canvas.height());
};
resizeCanvas();就可以了。
全部回答
- 1楼网友:风格不统一
- 2021-01-25 15:20
我暂时保留我的看法!
- 2楼网友:执傲
- 2021-01-25 15:08
只有内嵌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前设置他的大小
估计是没分了,给后人看吧
所以有两种方案
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前设置他的大小
估计是没分了,给后人看吧
- 3楼网友:行雁书
- 2021-01-25 14:14
用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>
我要举报
如以上问答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
大家都在看
推荐资讯