HTML中全屏畫布周圍令人討厭的空白
[英]Annoying white space around a full screen canvas in HTML
問題描述
我已經在這個問題上尋找了大量的解決方案，但是在實現方面我沒有任何運氣。
一切工作正常，但是畫布周圍有一個令人討厭的白色邊框。 我究竟做錯了什么？
這是我的代碼：
var canvas = document.getElementById("canvas"); var x = window.innerWidth - 20; var y = window.innerHeight - 20; function resizeCanvas() { canvas.style.width = x.toString() + 'px'; canvas.style.height = y.toString() + 'px'; } var granimInstance = new Granim({ element: '#canvas', name: 'radial-gradient', direction: 'radial', opacity: [1, 1], isPausedWhenNotInView: true, states : { "default-state": { gradients: [ ['#ffb347', '#ffcc33'], ['#83a4d4', '#b6fbff'], ['#9D50BB', '#6E48AA'] ] } } }); window.onresize = resizeCanvas; resizeCanvas();
.canvas { position: absolute; display: block; } html, body { margin: 0; padding: 0; overflow: hidden }
<script src="https://cdnjs.cloudflare.com/ajax/libs/granim/1.0.6/granim.js"></script> <!DOCTYPE html> <html> <head> <title>Announcements</title> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <link rel="stylesheet" href="assets/css/club_meetingv2.css"> </head> <body> <canvas id="canvas"></canvas> <script type="text/javascript" src="assets/js/club_meetingv2.js"></script> </body> </html>
2 個解決方案
解決方案1
0 2017-11-03 11:02:21
您已經說過有一個令人討厭的白色邊框，您是說在漸變的最右端和最底端嗎？
如果是這樣，那是由於前幾行代碼：
var x = window.innerWidth - 20; var y = window.innerHeight - 20;
您從右側和底部抽出了20px的寬度和高度。 刪除下面的代碼庫中的代碼，將實現我認為的目標？
解決方案2
0 已采納 2018-01-14 01:46:06
看來我找到了解決方案。
body {margin: 0}
在全屏瀏覽器和大屏幕（49英寸）上擺脫頁腳下的空白
[英]Get Rid of White Space Under Footer On Full Screen Browser And Large (49 inch) Screens
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.