Question

这很难用语言解释，而是我上载了网站here来演示该问题。下面有一个包含代码并模拟相同问题的代码段。

请注意，当您向下滚动并悬停在边缘附近时，白色印记会在相邻div的画布上留下。为什么会发生这种情况，我该如何解决？

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>

Answer 1

您的画布根据身体设置高度，但是您的＃top-bar div占用了一部分空间。

因此＃top-bar div所在的地方是多余的空间

您可以将画布大小设置为（正文-＃top-bar高度）。

当边缘附近的弧线扩大时，画布会在外面留下“印记”

1 个答案: