我已经在这个问题上寻找了很多解决方案,但是在实现方面我没有任何运气。
一切工作正常,但是画布周围有一个令人讨厌的白色边框。我究竟做错了什么?
这是我的代码:
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/