Question

我的窗户大小有问题。我正在这样的窗口大小

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:0和padding:0添加到body

Answer 1

好吧，我试图找到一个正常的＆＃34;解决方案，但我没有找到，所以这里是一个＆＃34;棘手＆＃34;解。这是一个想法，但我认为你需要自定义它，以便它适合你的项目。

逻辑是创建一个div，它将占据文档的整个宽度和高度，并根据它设置画布尺寸。最后一步是恢复元素的状态（html，body等）

所以：

＆＃13;

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

＆＃13;

html, body {
  margin:0;  
}

canvas {
  background:red;
  display:block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas></canvas>

＆＃13;

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

Answer 2

在html文件的顶部添加<!DOCTYPE html>会有所帮助。

Jquery windows.width（height）溢出

2 个答案: