canvas实现粘性可拖拽皮肤效果代码-html代码-BFW代码库

canvas实现粘性可拖拽皮肤效果代码

代码语言：html

所属分类：拖放

代码描述：canvas实现粘性可拖拽皮肤效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">


    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">



    <style>
        html, body {
          margin: 0;
          display: flex;
        }
        
        canvas {
          width: 100%;
          height: 100%;
        }
    </style>


</head>

<body>
    <canvas></canvas>

    <script>
        const canvas = document.querySelector('canvas');
        const ctx = canvas.getContext('2d');
        const pixelRatio = window.devicePixelRatio > 1 ? 2 : 1;
        
        const bgColor = '#f1f1f1';
        const mainColor = '#F94892';
        
        const fps = 60;
        const interval = 1000 / fps;
        let now;
        let then = Date.now();
        let delta;
        
        let box;
        
        function init() {
          canvas.width = innerWidth * pixelRatio;
          canvas.height = innerHeight * pixelRatio;
          // ctx.scale(pixelRatio, pixelRatio)
        
          window.mouse = {
            isDown: false,
            x: canvas.width / 2,
            y: canvas.height / 2,
            ox: canvas.width / 2,
            oy: canvas.height / 2,
            mx: canvas.width / 2,
            my: canvas.height / 2 };
        
          window.BOX_SIZE = hypotenuse(canvas.width, canvas.height) * 0.3;
        
          box = new Box(
          canvas.width / 2 - BOX_SIZE / 2,
          canvas.height / 2 - BOX_SIZE / 2,
          BOX_SIZE,
          BOX_SIZE);
        
        }
        
        function render() {
          requestAnimationFrame(render);
        
          now = Date.now();
          delta = now - then;
          if (delta < interval) return;
        
          ctx.fillStyle = bgColor;
          ctx.fillRect(0, 0, canvas.width, canvas.height);
        
          box.animate();
        
          then = now - delta % interval;
        }
        
        function onPointerDown(e) {
          if (!box.checkInsideBox(e.clientX * pixelRatio, e.clientY * pixelRatio)) return;
          if (mouse.isDown) return;
          mouse.isDown = true;
          mouse.x = e.clientX * pixelRatio;
          mouse.y = e.clientY * pixelRatio;
          mouse.ox = e.clientX * pixelRatio;
          mouse.oy = e.clientY * pixelRatio;
          window.addEventListener('pointermove', onPointerMove);
          window.addEventListener('pointerup', onPointerUp);
        }
        
        function onPointerMove(e) {
          mouse.x = e.clientX * pixelRatio;
          mouse.y = e.clientY * pixelRatio;
          mouse.mx = canvas.width / 2 + mouse.x - mouse.ox;
          mouse.my = canvas.height / 2 + mouse.y - mouse.oy;
          if (distance(mouse.x, mouse.y, canvas.width / 2, canvas.height / 2) > BOX_SIZE * 1.3) {
            onPointerUp();
          }
        }
        
        function onPointerUp() {
          backAnimation();
          window.removeEventListener('pointermove', onPointerMove);
          window.removeEventListener('pointerup', onPointerUp);
        }
        
        function backAnimation() {
          gsap.to(mouse, {
            mx: canvas.width / 2,
            my: canvas.height / 2,
            duration: 0.4,
            ease: Elastic.easeOut.config(1, 0.1),
            onComplete: () => mouse.isDown = false });
        
        }
        
        window.addEventListener('pointerdown', onPointerDown);
        window.addEventListener('resize', init);
        window.addEventListener('DOMContentLoaded', () => {
          init();
          re.........完整代码请登录后点击上方下载按钮下载查看