Question

我最近开始学习Canvas，但是因为我偶然发现了一个我无法解决的问题：

我只是尝试创建一个占据整个窗口的画布，但是看起来很简单，我无法设法使它正确，它总是占据窗口宽度和高度的大约105％。

这里是代码：

HTML：

<head>

    <title> Canvas Tests</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>

    <canvas></canvas>
</body>
<script src="js/sketch.js"></script>

CSS

body,html{
    background : red;
    margin : 0;
}


canvas{
    background: blue;
    margin : 0;
}

JS

var canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
console.log(canvas.width,canvas.height);
// output : 1536 759

我尝试用div替换canvas标签，并将其宽度和高度设置为1536/759，在这种情况下，它的大小正确。

问题出现在chrome和firefox中，似乎只有在我尝试调整画布大小时才会出现。任何帮助表示赞赏

Answer 1

将display:block添加到您的canvas：

canvas{
    background: blue;
    margin : 0;
    display:block;
}

或使用position : absolute;与left:0和right:0一起使其沿窗口宽度延伸

canvas{
   position: absolute;
   left: 0;
   right: 0;
   background: blue;
}

（我不知道为什么它在下面的代码段中没有正常工作，但这里有一个小提琴：https://jsfiddle.net/7n760tpo/17/）

＆＃13;

var canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

＆＃13;

body,html{
    background : red;
    margin : 0;
}

canvas{
    background: blue;
    position: absolute;
    left: 0;
    right: 0;
}

＆＃13;

<canvas></canvas>

＆＃13;

画布占视口的100％以上

1 个答案: