canvas跟随鼠标移动的随机线条

Html

Css

* {
	margin:0;
	padding:0;
}
body {
	width:100%;
	height:100vh;
}

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

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas跟随鼠标移动的随机线条



代码描述：canvas跟随鼠标移动的随机线条

更新时间：2020-06-17 00:30:21

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

坏人

相关代码

canvas跟随鼠标移动的随机线条

最新