如何创建画布的大小匹配用户的屏幕

How to create canvas which size matches user's screen?

本文关键字：屏幕 用户 何创建 创建      更新时间：2023-09-26

如何做到没有边框?我就这样尝试。

CSS: body {margin: 0;}

JS: 

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

但是屏幕的顶部和左侧都有白线。它也有两个滚动条。我该怎么办?

你可以试试:

CSS: 
body{
    overflow: hidden;
    margin: 0;
    padding: 0;
}
JS: 
var canvas = document.querySelector('#myCanvas');
var ctx = canvas.getContext("2d");
canvas.height = window.innerHeight;
canvas.width  = window.innerWidth;
ctx.strokeStyle = "red";
ctx.strokeRect(0, 0, canvas.width, canvas.height);

小提琴:http://jsfiddle.net/fta462c2/1/

试试这个。这会解决你的问题。

body {    
    margin: 0 !important;
    overflow:hidden;
    padding: 0 !important;
}

原因是宽度是整个屏幕的宽度。这使得它与窗口一样宽，但由于它由于填充/边距而部分移动，您需要修复填充/边距，或者更改宽度和高度，如下所示:

canvas.width = window.innerWidth - 20;
canvas.height = window.innerHeight - 20;
相关文章：