canvas实现两点之间路径连线动画效果代码-html代码-BFW代码库

canvas实现两点之间路径连线动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现两点之间路径连线动画效果代码

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

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

<head>
    <meta charset="UTF-8">

</head>

<body>

    <script>
        const canvas = document.createElement('canvas');
        const c = canvas.getContext('2d');
        
        let targetX, targetY, startX, startY;
        const rectSize = 20;
        const maxStep = 10;
        
        const matchStep = maxStep / 2;
        const halfRectSize = rectSize / 2;
        let matchTime = 0;
        const resetTime = 20;
        
        function randX() {
          return innerWidth * 0.8 * Math.random() + innerWidth * 0.1;
        }
        function randY() {
          return innerHeight * 0.8 * Math.random() + innerHeight * 0.1;
        }
        
        function resize() {
          canvas.width = innerWidth;
          canvas.height = innerHeight;
          reset();
        }
        window.addEventListener('resize', resize);
        resize();
        
        document.body.appendChild(canvas);
        document.body.style.margin = 0;
        
        function reset() {
          matchTime = 0;
          targetX = randX();
          targetY = randY();
          startX = randX();
          startY = randY();
          c.fillStyle = '#ccc';
          c.fillRect(0, 0, innerWidth, innerHeigh.........完整代码请登录后点击上方下载按钮下载查看