2017-05-19 3 views
1

안녕하세요 :) 저는 현재 누군가 브라우저 창 크기를 조정할 때마다 캔버스의 크기를 조정하려고합니다. 여기 내 코드는 지금까지 있습니다 :브라우저 창에 맞게 캔바스 크기를 조정할 수 있습니까?

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 파일입니다 높이, 내가 정말로 누군가의 브라우저 창에 맞게 조정하고 싶을 때. 내가 어떻게이 일을 할 수 있는지 설명해주세요! 고맙습니다!

+0

사용 window.onresize 기능과 window.innerWidth과 창을 사용하여 캔버스 폭을 업데이트합니다. innerHeight – karthick

답변

1

안녕하세요 :)이 질문에서, 당신은 당신이 사용할 수, windowResized()라는 내장 함수 (이벤트)가 p5.js 라이브러리,을 사용하는 것으로. 이 함수는 브라우저 창의 모든 크기 조정시 실행됩니다.

일단 해고되면 resizeCanvas()이라는 다른 기본 제공 함수를 사용하여 브라우저 창의 너비와 높이와 일치하도록 캔버스 크기의 크기를 조정할 수 있습니다.

여기 ... 당신이이 기능을 사용할 수있는 방법을 보여주는 빠른 example입니다

function setup() { 
 
    createCanvas(windowWidth, windowHeight); 
 
} 
 

 
function draw() { 
 
    background('#222'); 
 
    ellipse(windowWidth/2, windowHeight/2, 100, 100); 
 
    fill('#07C'); 
 
    noStroke(); 
 
} 
 

 
function windowResized() { 
 
    resizeCanvas(windowWidth, windowHeight); 
 
}
body{margin:0;overflow:hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.min.js"></script>

+0

안녕하세요, 고맙습니다. 이제는 페이지를 작게 만들 때 캔버스를 확대하는 방법이 있습니까? 내 게임에서, 페이지를 더 크게 만들 때 캔버스를 더 많이 보게되면 안된다. 감사! – Patrick

+0

음 .. 아마도,하지만 그건 다른 질문입니다. 당신은 오히려 새로운 해결책을 얻기 위해 추가 세부 사항으로 새로운 질문을해야합니다 :) –

0

윈도우 크기 조정 핸들러 만 있으면됩니다.

function setup() { 
    var canvas = createCanvas(1500, 600); 
    window.onresize = function() { 
    canvas.height = window.outerHeight; 
    canvas.width = window.outerWidth; 
    } 
} 

createCanvas가 캔버스에 대한 참조를 반환하는지 확인하십시오. 코드에서 요소에 대한 참조를 찾을 수없는 경우 DOM에서 해당 요소를 검색 할 수도 있습니다.

window.onresize = function() { 
    var canvas = document.querySelector("canvas"); 
    canvas.height = window.outerHeight; 
    canvas.width = window.outerWidth; 
} 
+0

불행히도 캔바스에는 영향을 미치지 않으며 고정 된 너비와 높이로 유지되며 창을 이동할 때 바뀌지 않습니다. 왜 그런가? – Patrick

+0

은 캔버스 요소에 대한 참조를 반환하는'createCanvas' 함수입니까? –

+0

저는 자바 스크립트를 처음 사용했습니다. 그게 무슨 뜻인지 설명해 주시겠습니까? 이것이 도움이되지만 createCanvas가 전체 코드에만 거기에 쓰여지는지는 잘 모릅니다. – Patrick

1

사용할 수 있습니다. 여기

(function() { 
 
    // get the precentage of height and width of the cavas based on the height and width of the window 
 
    getPercentageOfWindow = function() { 
 
     var viewportSize = getViewportSize(); 
 
     var canvasSize = getCanvastSize(); 
 
     return { 
 
      x: canvasSize.width/(viewportSize.width - 10), 
 
      y: canvasSize.height/(viewportSize.height - 10) 
 
     }; 
 
    }; 
 
    //get the context of the canvas 
 
    getCanvasContext = function() { 
 
     return $("#myCanvas")[0].getContext('2d'); 
 
    }; 
 
    // get viewport size 
 
    getViewportSize = function() { 
 
     return { 
 
      height: window.innerHeight, 
 
      width: window.innerWidth 
 
     }; 
 
    }; 
 
    // get canvas size 
 
    getCanvastSize = function() { 
 
     var ctx = getCanvasContext(); 
 
     return { 
 
      height: ctx.canvas.height, 
 
      width: ctx.canvas.width 
 
     }; 
 
    }; 
 
    // update canvas size 
 
    updateSizes = function() { 
 
     var viewportSize = getViewportSize(); 
 
     var ctx = getCanvasContext(); 
 
     ctx.canvas.height = viewportSize.height * percentage.y; 
 
     ctx.canvas.width = viewportSize.width * percentage.x; 
 
    }; 
 
    var percentage = getPercentageOfWindow(); 
 
    $(window).on('resize', function() { 
 
     updateSizes(); 
 
    }); 
 
}());
canvas { 
 
    border: 1px dotted black; 
 
    background: blue; 
 
}
<canvas id="myCanvas" width="300" height="300" >

그리고

이 가능한 link입니다.

+0

그것은 많은 코드입니다. (function() { const can = myCanvas; const scale = { x : can)과 동일하게 처리 할 수 ​​있습니다.너비/(innerWidth - 10), y : can.height/(innerHeight - 10) }; addEventListener ('resize',() => { can.width = innerWidth * scale.x; can.height = innerHeight * scale.y; }); }()); ' – Blindman67

관련 문제