我已经在这个问题上寻找了很多解决方案,但是在实现方面我没有任何运气。

一切工作正常,但是画布周围有一个令人讨厌的白色边框。我究竟做错了什么?

这是我的代码:



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>

最佳答案

您已经说过有一个令人讨厌的白色边框,您是说在渐变的最右端和最底端吗?

如果是这样,那是由于前几行代码:

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

您从右侧和底部抽出了20px的宽度和高度。删除下面的代码库中的代码,将实现我认为的目标?

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

关于javascript - HTML中全屏 Canvas 周围令人讨厌的空白,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47083835/

10-09 17:59