我正在制作画布动画，并且刚刚开始添加事件侦听器。不幸的是，当我添加一个侦听器来跟踪光标的位置时，每次移动鼠标时，动画的速度都会大大降低。如果单击，它将完全停止。我猜想要处理的太多了，所以有没有办法改善动画的运行时间？这可以与Web Workers一起使用吗？
var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var c = canvas.getContext('2d');
//Variables for the blue ball
var bx = Math.random() * innerWidth;
var by = Math.random() * innerHeight;
var bbdx = 1;
var bbdy = 1;
var bRadius = 12;
//Variables for the red balls
var rx = Math.random() * innerWidth;
var ry = Math.random() * innerHeight;
var rrdx = 1;
var rrdy = 1;
var rRadius = 12;
//Mouse coordinate object
var mouse = {
x: undefined,
y: undefined
}
function bCircle() {
c.beginPath();
c.arc(bx, by, bRadius, 0, Math.PI * 2, false);
c.strokeStyle = "white";
c.stroke();
c.fillStyle = "cornflowerblue";
c.fill();
c.closePath();
//Ball bouncing Conditional
}
function rCircle() {
c.beginPath();
c.arc(rx, ry, rRadius, 0, Math.PI * 2, false);
c.strokeStyle = "pink";
c.stroke();
c.fillStyle = "red";
c.fill();
c.closePath();
//Ball Bouncing Conditional
}
//Interactivity function
function bClick() {
window.addEventListener('mousemove', function(event) {
mouse.x = event.x;
mouse.y = event.y;
console.log(mouse);
});
}
function draw() {
c.clearRect(0, 0, innerWidth, innerHeight);
bCircle();
rCircle();
//bCircle Conditional
if (bx + bRadius > innerWidth || bx - bRadius < 0) {
bbdx = -bbdx;
}
//Conditional to mall the ball bounce up and down
if (by + bRadius > innerHeight || by - bRadius < 0) {
bbdy = -bbdy;
}
//Add 1 to x continously for it to move
bx += bbdx;
//Add 1 constantly to y for it to move up and down also
by += bbdy;
//rCircle Conditional
if (rx + rRadius > innerWidth || rx - rRadius < 0) {
rrdx = -rrdx;
}
if (ry + rRadius > innerHeight || ry - rRadius < 0) {
rrdy = -rrdy;
}
rx += rrdx;
ry += rrdy;
bClick();
}
setInterval(function() {
draw();
}, 8);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tap-Tap</title>
<style type="text/css">
canvas {
border: 1px solid black;
}
body {
margin: 0;
background-color: black;
}
</style>
</head>
<body>
<canvas></canvas>
<script src="ball.js" type="text/javascript"></script>
</body>
</html>您要在每次调用时冗余地添加“ mousemove”事件处理程序draw()。该.addEventListener()API并不会删除已添加前处理程序。过了一会儿，将有数百个，浏览器将调用每个。
bClick()在计时器处理程序外调用一次。同样，console.log()在“ mousemove”处理程序中的调用对性能没有帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句