2016-06-29 4 views
3

윈도우 크기에 문제가 있습니다. 나는이Jquery windows.width (height) overflow with

var boxwidth = $(window).width(); 
var boxheight = $(window).height(); 

처럼 윈도우의 크기를 복용 한 후 canvas

var canvas: document.createElement("canvas"), 
    start: function() { 
    this.canvas.width = boxwidth; 
    this.canvas.height = boxheight; 
    this.context = this.canvas.getContext("2d"); 
    document.body.insertBefore(this.canvas, document.body.childNodes[0]); 
    } 

를 만들하지만 난 폭과 높이 오버 플로우를 가지고 있어요.

완벽하게 창 크기에 맞는 캔버스를 만들고 싶습니다. 지금, 나는 내가 이미 margin:0padding:0 도움이 될 HTML 파일의 상단에 <!DOCTYPE html> 추가

답변

3

음, "정상적인"솔루션을 찾으려고했지만 찾지 못했습니다. 따라서 여기에 "까다로운"솔루션이 있습니다. 이는 아이디어이지만 프로젝트에 맞게 사용자 정의해야한다고 생각합니다.

로직은 div을 생성하여 문서의 전체 너비와 높이를 가져오고 그에 따라 캔버스 크기를 설정합니다. 이 까다로운 해결책

$('html, body').css({position: 'relative', height: '100%', overflow:'hidden'}); 
 
var tester = $('<div style="width:100%;height:100%" />').appendTo(document.body); 
 
$('canvas').css({ 
 
    width:$('body').width(), 
 
    height:tester.height() 
 
}); 
 
tester.remove(); 
 
$('html, body').removeAttr('style');
html, body { 
 
    margin:0; 
 
} 
 

 
canvas { 
 
    background:red; 
 
    display:block; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas></canvas>

http://jsbin.com/pinide/edit?html,css,js

+0

있다 : 마지막 단계는 요소의 상태 (HTML 바디 등) 그래서

복원하는 지금은 오버플로없이 적합하도록 완벽한 가치를 찾았습니다. – yahoo5000

0

body에 추가

image

오버 플로우

많이 있어요.

+1

내가 이미 – yahoo5000