侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

canvas简单连线动画的实现代码

技术  /  管理员 发布于 7年前   150

前言:canvas动画入门系列之简单连线动画。虽然简单,但连线动画应用场景还挺多,因此做了个小demo,一通百通。

step1:绘制点

首先创建个标签<canvas id="canvas"></canvas>
设置几个点的坐标

   const points = [        [200, 100], //上        [300, 200], //右        [100, 200], //左        [200, 100], //上        [200, 300], //下        [100, 200], //左        [300, 200], //右        [200, 300]      ];      const canvas = document.querySelector("canvas");      const ctx = canvas.getContext("2d");

然后把点给画出来

points.forEach(([x, y]) => {          drawDot(x, y);        });function drawDot(x1, y1, r) {          ctx.save();          ctx.beginPath(); //不写会和线连起来          ctx.fillStyle = "red";          //绘制成矩形          ctx.arc(x1, y1, r ? r : 2, 0, 2 * Math.PI);          ctx.fill();          ctx.restore();        }

step2:绘制线条

我们封装一个方法,传入起点终点,绘制一根线条

function drawLine(x1, y1, x2, y2) {          ctx.save();          ctx.beginPath(); //不写每次都会重绘上次的线          ctx.lineCap = "round";          ctx.lineJoin = "round";          var grd = ctx.createLinearGradient(x1, y1, x2, y2);          ctx.moveTo(x1, y1);          ctx.lineTo(x2, y2);          ctx.closePath();          ctx.strokeStyle = "rgba(255,255,255,1)";          ctx.stroke();          ctx.restore();        }

step3:线条动画

这里面需要计算两点之间的斜率,然后x坐标每次挪动±1单位,已知斜率和x偏移,即可计算出y的偏移。值得注意的是,这个坐标系和数学中的xy坐标系有点不一样,y轴是反的。然后可以引入额外的参数speed控制速度

function lineMove(points) {          if (points.length < 2) {  return;          }          const [[x1, y1], [x2, y2]] = points;          let dx = x2 - x1;          let dy = y2 - y1;          if (Math.abs(dx) < 1 && Math.abs(dy) < 1) {points = points.slice(1);lineMove(points);return;          }          let x = x1,y = y1; //线条绘制过程中的终点          if (dx === 0) {(x = x2), (y += (speed * dy) / Math.abs(dy));          } else if (dy === 0) {x += (speed * dx) / Math.abs(dx);y = y2;          } else if (Math.abs(dx) >= 1) {let rate = dy / dx;x += (speed * dx) / Math.abs(dx);y += (speed * rate * dx) / Math.abs(dx);          }          drawLine(x1, y1, x, y);          points[0] = [x, y];          window.requestAnimationFrame(function() {lineMove(points);          });        }

主要代码就这么多,先看效果

完整代码

<!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-连线动画</title></head><body>  <canvas id="canvas" width="400" height="400"></canvas>  <script>    //起点:10,20 终点:150,200    const points = [      [200, 100], //上      [300, 200], //右      [100, 200], //左      [200, 100], //上      [200, 300], //下      [100, 200], //左      [300, 200], //右      [200, 300]    ];    const canvas = document.querySelector("canvas");    const ctx = canvas.getContext("2d");    // const img = new Image();    const speed = 10; //速度    // img.onload = function() {    // canvas.width = img.width;    // canvas.height = img.height;    animate(ctx);    // };    // img.src = "./imgs/demo.png";    function animate(ctx) {      // ctx.drawImage(img, 0, 0);      ctx.fillRect(0, 0, canvas.width, canvas.height);      points.forEach(([x, y]) => {        drawDot(x, y);      });      lineMove(points);    }    function lineMove(points) {      if (points.length < 2) {        return;      }      const [[x1, y1], [x2, y2]] = points;      let dx = x2 - x1;      let dy = y2 - y1;      if (Math.abs(dx) < 1 && Math.abs(dy) < 1) {        points = points.slice(1);        lineMove(points);        return;      }      let x = x1,        y = y1; //线条绘制过程中的终点      if (dx === 0) {        (x = x2), (y += (speed * dy) / Math.abs(dy));      } else if (dy === 0) {        x += (speed * dx) / Math.abs(dx);        y = y2;      } else if (Math.abs(dx) >= 1) {        let rate = dy / dx;        x += (speed * dx) / Math.abs(dx);        y += (speed * rate * dx) / Math.abs(dx);      }      drawLine(x1, y1, x, y);      points[0] = [x, y];      window.requestAnimationFrame(function () {        lineMove(points);      });    }    function drawLine(x1, y1, x2, y2) {      ctx.save();      ctx.beginPath(); //不写每次都会重绘上次的线      ctx.lineCap = "round";      ctx.lineJoin = "round";      var grd = ctx.createLinearGradient(x1, y1, x2, y2);      ctx.moveTo(x1, y1);      ctx.lineTo(x2, y2);      ctx.closePath();      ctx.strokeStyle = "rgba(255,255,255,1)";      ctx.stroke();      ctx.restore();    }    function drawDot(x1, y1, r) {      ctx.save();      ctx.beginPath(); //不写会和线连起来      ctx.fillStyle = "red";      //绘制成矩形      ctx.arc(x1, y1, r ? r : 2, 0, 2 * Math.PI);      ctx.fill();      ctx.restore();    }  </script></body></html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


  • 上一条:
    使用canvas压缩图片上传的方法示例
    下一条:
    canvas实现烟花的示例代码
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 2024.07.09日OpenAI将终止对中国等国家和地区API服务(0个评论)
    • 2024/6/9最新免费公益节点SSR/V2ray/Shadowrocket/Clash节点分享|科学上网|免费梯子(0个评论)
    • 国外服务器实现api.openai.com反代nginx配置(0个评论)
    • 2024/4/28最新免费公益节点SSR/V2ray/Shadowrocket/Clash节点分享|科学上网|免费梯子(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-07
    • 2017-08
    • 2017-09
    • 2018-01
    • 2018-07
    • 2018-08
    • 2018-09
    • 2018-12
    • 2019-01
    • 2019-02
    • 2019-03
    • 2019-04
    • 2019-05
    • 2019-06
    • 2019-07
    • 2019-08
    • 2019-09
    • 2019-10
    • 2019-11
    • 2019-12
    • 2020-01
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2020-07
    • 2020-08
    • 2020-09
    • 2020-10
    • 2020-11
    • 2021-04
    • 2021-05
    • 2021-06
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-12
    • 2022-01
    • 2022-02
    • 2022-03
    • 2022-04
    • 2022-05
    • 2022-06
    • 2022-07
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-08
    • 2023-09
    • 2023-10
    • 2023-12
    • 2024-02
    • 2024-04
    • 2024-05
    • 2024-06
    • 2025-02
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客