个人中心
gpt4 book ai didi

javascript - 调整浏览器窗口大小时让 Canvas 动态调整大小

转载 作者：太空宇宙 更新时间：2023-11-04 13:52:27 26 4
gpt4 key购买 nike

我在我的网页上设置了一个 Canvas ，其中运行了一个 js 动画，它填充了整个浏览器窗口，但是当我调整窗口大小时，我似乎无法让 Canvas 自动调整大小以适应新窗口尺寸。有人可以告诉我需要添加到我的 js 中才能正确获得此功能吗？谢谢!

var canvas = document.getElementById('canvas');
var makecodeplay = canvas.getContext('2d');
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;

makecodeplay.clearRect(0, 0, canvas.width, canvas.height);
makecodeplay.fillStyle = "rgb(75,77,81)";
makecodeplay.fillRect(0, 0, canvas.width, canvas.height);

function randomPaint(inX, inY) {
   
    var x = Math.floor(Math.random() * canvas.width);
    var y = Math.floor(Math.random() * canvas.height);
    var r, g, b;
    r = Math.floor(Math.random() * 255);
    g = Math.floor(Math.random() * 255);
    b = Math.floor(Math.random() * 255);
    makecodeplay.beginPath();
    makecodeplay.fillStyle = "rgba(35,37,41,0.3)";
    makecodeplay.fillRect(0, 0, canvas.width, canvas.height);
    makecodeplay.fill();
    makecodeplay.closePath();

    makecodeplay.beginPath();
    makecodeplay.strokeStyle = "rgba(" + r + "," + g + "," + b + ",0.1)";
    makecodeplay.lineWidth = 10;
    makecodeplay.moveTo(inX, inY);
    makecodeplay.lineTo(x, y);
    makecodeplay.stroke();
    makecodeplay.closePath();

    makecodeplay.beginPath();
    makecodeplay.strokeStyle = "rgba(" + r + "," + g + "," + b + ",0.1)";
    makecodeplay.lineWidth = 4;
    makecodeplay.moveTo(inX, inY);
    makecodeplay.lineTo(x, y);
    makecodeplay.stroke();
    makecodeplay.closePath();

    makecodeplay.beginPath();
    makecodeplay.strokeStyle = "rgb(" + r + "," + g + "," + b + ")";
    makecodeplay.lineWidth = 1;
    makecodeplay.moveTo(inX, inY);
    makecodeplay.lineTo(x, y);
    makecodeplay.stroke();
    makecodeplay.closePath();
     
  setTimeout(function () {
        randomPaint(x, y)
    }, 100);
}

randomPaint(1, 1);
        

html, body { 
	margin: 0; 
	padding: 0;
	width:  100%;
	height: 100%;
}

html {
	background-color: "#555761";
	background: "#555761";
}

body {
	font-family: "brandon-grotesque";
	font-wieght: 100;
	font-style: normal;
	color: #656771;
	bgcolor: "#555761";
}

p {
	font-family: "brandon-grotesque";
	font-wieght: 100;
	font-style: normal;
	color: #656771;
}

a {
	color: #555761;
}

a:link {
	color: #555761;
	text-decoration: none;
}

a:visited {
	color: #555761;
	text-decoration: none;
}

a:hover {
	color: #656771;
	text-decoration: none;
}

a:active {
	color: #555761;
	text-decoration: none;
}

/* Auto center content in window */
#stage {
	width:100%; 
	margin: 0 auto;
	padding: 0;
	} 

#stage canvas, #overlay {
	position: absolute;
	margin: 0 auto;
	padding: 0;
	}

#overlay {
	margin: 0 auto;
	padding: 0;
}

#overlay p {
	color: #333;
	font-family: "museo-sans";
	font-weight: 900;
	font-style: normal;
	font-size: 14px;
}

.centered {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	}

.centered-bottom {
	position: fixed;
	bottom: 3%;
	left: 50%;
	transform: translate(-50%, -0%);
	-webkit-transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>MAKECODEPLAY</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

		<script src="//use.typekit.net/uwk8rac.js"></script>
		<script>try{Typekit.load({ async: true });}catch(e){}</script>

    </head>
    <body>
        
        <div id="stage">
			<canvas id="canvas"></canvas>
			<div class="centered">
				<img src="img/makecodeplay-logo.png" alt="MAKECODEPLAY" height="70" width="771"></div>
			<div class="centered" style="margin-top:50px;">
				<p>SITE COMING SOON</p></div>
		  	<div class="centered-bottom">
		  		<footer>
 					<small>&copy; Copyright 2015, MAKECODEPLAY</small>
				</footer>
			</div>
		</div>
    </body>
</html>

最佳答案

有一个用于检测窗口大小调整的事件处理程序:https://developer.mozilla.org/de/docs/Web/API/GlobalEventHandlers/onresize

所以你可以做类似的事情

window.onresize = function()
{
    var canvas = document.getElementById('canvas');
    canvas.width = window.innerWidth;
    canvas.style.width = window.innerWidth;
    canvas.height = window.innerHeight;
    canvas.style.height = window.innerHeight;
}

关于javascript - 调整浏览器窗口大小时让 Canvas 动态调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32119012/

26 4 0
文章推荐： javascript - 如何在 Bootstrap 中设置多个标签导航
文章推荐： java - 位图不适用于 ListView
文章推荐： java - 如何录制 Android 模拟器操作的屏幕
文章推荐： javascript - Nanoscroller 显示无法读取未定义的属性 'style' 为什么？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com