这很难用语言解释，我上传了网站here来证明问题。下面的代码片段模拟了同样的问题。
请注意，当您向下滚动并将鼠标悬停在边缘附近时，相邻 div 上的 Canvas 外会留下白色印记。为什么会发生这种情况，我该如何解决？
var canvas = document.querySelector('canvas');
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
var context = canvas.getContext('2d');
var mouse = {
x: undefined,
y: undefined
}
window.addEventListener('mousemove', function(event){
mouse.x = event.x;
mouse.y = event.y;
});
function Circle(x, y, dx, dy, radius, bg){
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.radius = radius;
this.defaultRadius = radius;
this.bg = bg;
this.draw = function(){
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
context.fillStyle = this.bg;
context.fill();
}
this.update = function(){
if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
this.dx = -this.dx;
}
if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
this.dy = -this.dy;
}
if (this.x - mouse.x < 50 && this.x - mouse.x > -50 && this.y - mouse.y < 50 && this.y - mouse.y > -50) {
if (this.radius < 30) {
this.radius += 5;
}
} else {
if (this.radius > this.defaultRadius) {
this.radius -= 1;
}
}
this.x += this.dx;
this.y += this.dy;
this.draw();
}
}
var circlesArray = [];
for(var i = 0; i < 300; i++){
addNewCircle();
}
function addNewCircle(){
var radius = (Math.random() * 2) + 1;
var x = (Math.random() * (innerWidth - (radius*2))) + radius;
var y = (Math.random() * (innerHeight - (radius*2))) + radius;
var dx = Math.random() - 0.5;
var dy = Math.random() - 0.5;
var bg = 'rgba(255, 255, 255, 0.1)';
circlesArray.push(new Circle(x, y, dx, dy, radius, bg));
}
function animate(){
requestAnimationFrame(animate);
context.clearRect(0, 0, innerWidth, innerHeight);
for(var i = 0; i < circlesArray.length; i++){
circlesArray[i].update();
}
}
animate();*{
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-weight: 400;
margin: 0;
padding: 0;
color: rgba(0,0,0, 0.8);
}
#page{
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
}
#page canvas{
position: absolute;
top: 0;
left: 0;
}
#top-bar{
width: 100%;
height: 200px;
background: black;
}<!DOCTYPE html>
<html>
<body>
<div id="page">
<canvas></canvas>
</div>
<div id="top-bar">
</div>
</body>
</html>最佳答案
您的 Canvas 根据主体设置高度，但您的#top-bar div 占用了部分空间。
所以额外的空间就是你#top-bar div所在的地方
您可以将 Canvas 大小设置为 (body - #top-bar height)。
关于javascript - 当边缘附近的弧放大时，Canvas 在外面留下 "imprint"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52372317/