/** @type {HTMLCanvasElement} */
let canvas = document.querySelector('#canvas');
let cxt = canvas.getContext('2d');
let w = canvas.width = window.innerWidth;
let h = canvas.height = window.innerHeight;
mousePosition = {
x: Number,
y: Number
}
//随机颜色
function ranColor() {
return '#' + Math.floor(Math.random() * 16777215).toString(16);
}
window.addEventListener('resize', () => {
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
init();
});
window.addEventListener('mousemove', e => {
mousePosition.x = e.clientX;
mousePosition.y = e.clientY;
});
function Ball(x, y, r, color) {
this.x = x;
this.y = y;
this.r = r;
this.color = color;
this.draw = lastPosition => {
cxt.beginPath();
cxt.moveTo(lastPosition.lx, lastPosition.ly);
cxt.lineTo(this.x, this.y);
cxt.lineWidth = 3;
cxt.strokeStyle = this.color;
cxt.stroke();
}
this.update = () => {
//鼠标旧位置
let lastPosition = {
lx: this.x,
ly: this.y
};
this.x = mousePosition.x;
this.y = mousePosition.y;
this.draw(lastPosition);
}
}
let ball;
function init() {
ball = new Ball(w / 2, h / 2, 20, ranColor());
}
function animate() {
requestAnimationFrame(animate);
cxt.fillStyle = 'rgba(0,0,0,0.1)';
cxt.fillRect(0, 0, w, h);
ball.update();
}
init();
animate();
