2016-06-29 2 views
3

У меня проблема с размером окна. Я беру размер окна как этотJQuery windows.width (высота) с переполнением

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]); 
    } 

Но я получил переполнение ширины и высоты.

Я хочу создать холст, который идеально подходит для размера окна. Теперь, я получил много перелива

image

Я уже добавить margin:0 и padding:0 к body

ответ

3

Ну, я попытался найти «нормальное» решение, но не нашел, так что вот «сложное» решение. Это идея, но я уверен, что вам нужно будет ее настроить, чтобы она соответствовала вашему проекту.

Логика заключается в том, чтобы создать div, что она будет принимать всю ширину и высоту документа и задавать размеры холста в соответствии с ним. Последним шагом является восстановление состояния элементов (HTML, тело и т.д.)

Итак:

$('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

это сложно решение на данный момент я просто нахожу идеальное значение, чтобы его можно было без переполнения – yahoo5000

0

Добавление <!DOCTYPE html> в верхней части вашего файла HTML должно помочь.

+1

я уже это – yahoo5000