Question

我在这个问题上搜索了大量的解决方案，但在实施方面我没有任何运气。

一切都很好，但画布周围有这个令人讨厌的白色边框。我做错了什么？

这是我的代码：

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>

Answer 1

你说有一个令人讨厌的白色边框，你的意思是在渐变的最右边和底部吗？

如果是这样，由于前几行代码：

var x = window.innerWidth - 20; var y = window.innerHeight - 20;

您从右侧和底部取出20px的宽度和高度。在下面的codepen中删除它将实现我认为你想要的吗？

https://codepen.io/Robhern135/pen/NwxoMR

Answer 2

似乎我找到了解决方案。

body {margin: 0}

HTML中的全屏画布周围令人讨厌的空白区域

2 个答案: