/** @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();

總結

以上是生活随笔為你收集整理的html 跟随鼠标移动线条,canvas跟随鼠标移动的随机线条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。