안녕하세요 :) 저는 현재 누군가 브라우저 창 크기를 조정할 때마다 캔버스의 크기를 조정하려고합니다. 여기 내 코드는 지금까지 있습니다 :브라우저 창에 맞게 캔바스 크기를 조정할 수 있습니까?
HTML : 내가 고정 폭을 설정하고 createCanvas(1500, 600);
과 :
var blob;
var blobs = [];
var zoom = 1;
function setup() {
createCanvas(1500, 600);
blob = new Blob(0, 0, 64);
for (var i = 0; i <100; i++) {
var x = random(-width,width);
var y = random(-height,height);
blobs[i] = new Blob(x, y, 8);
}
}
function draw() {
background(3, 3, 40);
translate(width/2, height/2);
var newzoom = 64/blob.r;
zoom = lerp(zoom, newzoom, 0.1);
scale(zoom);
translate(-blob.pos.x, -blob.pos.y);
for (var i = blobs.length-1; i >=0; i--) {
blobs[i].show();
if (blob.eats(blobs[i])) {
blobs.splice(i, 1);
}
}
blob.show();
blob.update();
}
는 말한다 : 여기
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="libraries/p5.js">
</script>
<script language="javascript" src="libraries/p5.dom.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js">
</script>
<script language="javascript" type="text/javascript" src="blob.js">
</script>
<title>USGame</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px;
border: 0;
overflow: hidden; /* Disable scrollbars */
display: block; /* No floating content on sides */
}
</style>
</head>
<body>
</body>
</html>
및 내 JS 파일입니다 높이, 내가 정말로 누군가의 브라우저 창에 맞게 조정하고 싶을 때. 내가 어떻게이 일을 할 수 있는지 설명해주세요! 고맙습니다!
사용 window.onresize 기능과 window.innerWidth과 창을 사용하여 캔버스 폭을 업데이트합니다. innerHeight – karthick