Canvas实现鼠标拖拽效果

先上效果
在这里插入图片描述
代码如下
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canvas Resize</title>
    <style type="text/css">
        html,
        body {
     
     
            width: 100%;
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <canvas></canvas>
    <script>

        // 生成随机数
function randomIntFromRange(low, high) {
     
     
    return Math.floor(Math.random() * (high - low + 1) + low);
}

function randomDoubleFromRange(low, high) {
     
     
    return Math.random() * (high - low + 1) + low;
}
// 生成随机颜色
function randomColors(colors) {
     
     
    return colors[Math.floor(Math.random() * colors.length)];
}
// 获取两点之间的距离
function getDistance(x1, y1, x2, y2) {
     
     
    let dx = x1 - x2;
    let dy = y1 - y2;
    return Math.sqrt(dx * dx + dy * dy);
}


/**
 * 颜色数组
 */
let colorArray = [
    '#FF00FF',
    '#97A7F8',
    '#C957CA',
    '#76E2FE',
    '#00FFFF',
    '#FFFF00',
    '#FF4500'
];


/**
 *初始化鼠标位置 屏幕中间
 */
let mouse = {
     
     
    x: window.innerWidth / 2,
    y: window.innerHeight / 2
}


/**
 * 事件监听
 */
// 监听鼠标移动
window.addEventListener('mousemove', function (event) {
     
     
    mouse.x = event.clientX;
    mouse.y = event.clientY;
});
// 窗口大小监听
window.addEventListener('resize', function () {
     
     
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    init();
});


/**
 * 绘图部分
 */
let canvas = document.querySelector('canvas');
// 设置窗口的宽高为canvas的宽高
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let ctx = canvas.getContext('2d');

// 画小球
function Particle(x, y, radius, color) {
     
     
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.theta = randomDoubleFromRange(0, 2 * Math.PI);//随机一个角度,用来形成小球轨迹
    this.speed = 0.05;//速度
    this.distance = randomIntFromRange(20, 90);//随机生成距离鼠标中心点的距离
    this.dragSpeed = 0.05;
    //记录上一次鼠标的位置
    this.lastMouse = {
     
     
        x: x,
        y: y
    };

    this.draw = function (lastPosition) {
     
     
        ctx.beginPath();
        ctx.strokeStyle = this.color;
        ctx.lineWidth = this.radius;
        ctx.moveTo(lastPosition.x, lastPosition.y);
        ctx.lineTo(this.x, this.y);
        ctx.stroke();
        ctx.closePath();
    }

    this.update = function () {
     
     
        let lastPosition = {
     
     
            x: this.x,
            y: this.y
        }

        // 拖拽效果
        this.lastMouse.x += (mouse.x - this.lastMouse.x) * this.dragSpeed;
        this.lastMouse.y += (mouse.y - this.lastMouse.y) * this.dragSpeed;

        this.x = this.lastMouse.x + Math.cos(this.theta) * this.distance;
        this.y = this.lastMouse.y + Math.sin(this.theta) * this.distance;

        this.theta += this.speed;
        this.draw(lastPosition);
    }
}

let particles;

function init() {
     
     
    // 初始化球的个数
    particles = [];
    for (let i = 0; i < 50; i++) {
     
     
        let color = randomColors(colorArray);
        particles.push(new Particle(canvas.width / 2, canvas.height / 2, 3, color));
    }
}

function animate() {
     
     
    requestAnimationFrame(animate);
    // 每一帧都给之前的帧蒙上一层白色透明的矩形
    ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    for (let p of particles) {
     
     
        p.update();
    }
}

init();
animate();
    </script>
</body>

</html>
Canvas实现鼠标拖拽效果

猜你喜欢
