大屏自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="canvas zoom example">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>zoom</title>
<script src="js/jquery1.10.2.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#outer {
position: fixed;
top: 0px;
left: 0px;
overflow: hidden;
transform-origin: left top;
z-index: 999;
}
</style>
</head>
<body>
<div style="height: 100%; width: 100%; background-color: rgb(255, 255, 255);">
<div id="outer">
<canvas id="canvas" width="1920" height="953"></canvas>
<div style="width:100%;height:100%;background-color:#ccc">
<div style="font-size:30px;">a54d6s5f46a54sdf</div>
<div style="position:absolute;left:200px;background-color: #fff;">
asdfasdf
</div>
</div>
</div>
</div>
<script type="text/javascript">
const WIDTH = 1920;
const HEIGHT = 1080;
let ctx = document.getElementById('canvas'),
content = ctx.getContext('2d'),
round = [],
initRoundPopulation = 80;
ctx.width = WIDTH;
ctx.height = HEIGHT;
function box(index, x, y) {
this.index = index;
this.x = x;
this.y = y;
this.r = Math.random() * 5 + 1;
var alpha = (Math.floor(Math.random() * 10) + 1) / 10 / 2;
this.color = "rgba(255,255,255," + alpha + ")";
}
box.prototype.draw = function() {
content.fillStyle = this.color;
content.shadowBlur = this.r * 2;
content.beginPath();
content.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
content.closePath();
content.fill();
};
function animate() {
content.clearRect(0, 0, WIDTH, HEIGHT);
for (var i in round) {
round[i].move();
}
requestAnimationFrame(animate)
}
box.prototype.move = function() {
this.y -= 0.50; // 上升移动速度
if (this.y <= -10) {
this.y = HEIGHT + 10;
}
this.draw();
};
function init() {
for (var i = 0; i < initRoundPopulation; i++) {
round[i] = new box(i, Math.random() * WIDTH, Math.random() * HEIGHT);
round[i].draw();
}
animate();
}
init();
const screenWidth = 1920;
const screenHeight = 1080;
let innerWidth = window.innerWidth;
let throttle = false,
last;
$("#outer").width(screenWidth);
$("#outer").height(screenHeight);
$("#outer").css({
// 'transform': 'scale(' + innerWidth / screenWidth + ')'
'transform': 'scale(' + innerWidth / screenWidth + ',' + innerHeight / screenHeight + ')'
})
window.onresize = function() {
if (last != 'undefined')
clearTimeout(last)
last = setTimeout(function() {
throttle = false;
innerWidth = window.innerWidth;
$("#outer").css({
// 'transform': 'scale(' + innerWidth / screenWidth + ')'
'transform': 'scale(' + innerWidth / screenWidth + ',' + innerHeight / screenHeight +
')'
})
}, 80)
}
</script>
</body>
</html>
