js实现canvas爱心跟随鼠标抖动动画效果代码-html代码-BFW代码库

js实现canvas爱心跟随鼠标抖动动画效果代码

代码语言：html

所属分类：粒子

代码描述：js实现canvas爱心跟随鼠标抖动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">
<head>

    <meta charset="UTF-8">




    <style>
        html, body {
            background: #000;
        }

        * {
            margin: 0;
            overflow: hidden;
        }

        #canvas {
            width: 100%;
            height: 100%;
        }
    </style>




</head>

<body>

    <canvas id="canvas" width="1536" height="294"></canvas>


    <script>
        let range = n => Array.from(Array(n).keys());

        class Vector {

            constructor(x = 0, y = 0) {
                this.x = x;
                this.y = y;
            }

            reflect() {
                return new Vector(-this.x, -this.y);
            }

            add(vector) {
                return new Vector(this.x + vector.x, this.y + vector.y);
            }

            subtract(vector) {
                return new Vector(this.x - vector.x, this.y - vector.y);
            }

            scale(scalar = 1) {
                return new Vector(this.x * scalar, this.y * scalar);
            }

            length() {
                return Math.sqrt(this.x * this.x + this.y * this.y);
            }

            distance(vector) {
                let dx = this.x - vector.x;
                let dy = this.y - vector.y;

                return Math.sqrt(dx * dx + dy * dy);
            }}



        class IO {

            constructor() {
                this.mouse = new Vector();
                this.bindMouse();
            }

            bindMouse() {
                window.addEventListener('mousemove', ({
                    x, y
                }) => {
                    this.mouse.x = x;
                    this.mouse.y = y;
                });
            }}



        class Point {

            constructor({
                position = new Vector(), color = '#f00', size = 3
            }) {
                this.position = position;
                this.color = color;
                this.size = size;
            }

            render(ctx) {
                ctx.beginPath();

                ctx.fillStyle = this.color;
                ctx.arc(this.position.x, this.position.y, this.size, 0, 2 * Math.PI);
                ctx.fill();

                ctx.closePath();
            }}



        class SpringPoint extends Point {

            constructor({
                target = new Vector(), elasticity = 1e-1, color = 'rgba(255, 0, 0, .6)', size = 3, damping = 1e-1
            }) {
                super({
                    position: target, color, size
                });
                this.velocity = new Vector();
                this.target = target;
                this.elasticity = elasticity;
                this.damping = damping;
            }

            updateVelocity() {
                let damping = this.velocity.scale(this.damping);
                let force = this.target.
                subtract(this.position).
                scale(this.elasticity).
                subtract(damping);

                this.velocity = this.velocity.add(force);
            }

            updatePosition() {
                this.position = this.position.add(this.velocity);
            }

            update() {
                this.updatePosition();
                this.updateVelocity();
            }}



        class SpringTrail extends SpringPoint {

            constructor(config) {
                super(config);
                this.trail = range(config.trailSize || 10).map(index => {
                    config.target = this.position;
                    config.elasticity = 1 / (index * 8);
                    config.damping = 8 / (index * 10 + 5);
                    return new SpringPoint(config);
                });
            }

            update() {
                super.update();
                this.trai.........完整代码请登录后点击上方下载按钮下载查看