1.  /*随机生成两个点，然后以两点为端点，进行运动，主要使用了SetInterval,对画布进行不断的擦除描绘的操作*/
    1 <!DOCTYPE html>
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.      <title></title>
  6.  </head>
  7.  <body>
  8.      <canvas id="dir" width="300" height="300"></canvas>
  9.      <script type="text/javascript">
  10.          var canvas = document.getElementById("dir");
  11.          var ctx = canvas.getContext("2d");
  12.          var org = {
  13.              x: Math.random()*canvas.width,
  14.              y: Math.random() * canvas.height
  15.          };
  16.          var now = {
  17.              x: Math.random() * canvas.width,
  18.              y: Math.random() * canvas.height
  19.          };
  20.          var newxy = {
  21.              x: 0,
  22.              y: 0
  23.          };
  24.          function init() {
  25.              ctx.beginPath();
  26.              ctx.moveTo(org.x, org.y);
  27.              ctx.lineTo(now.x, now.y);
  28.              ctx.stroke();
  29.              math();
  30.          }
  31.  
  32.          var i = 1;
  33.          function math() {
  34.              var wid = Math.abs(now.x - org.x);//x轴的长，绝对值
  35.              var hei = Math.abs(now.y - org.y);//y轴长
  36.              var length = Math.pow(Math.pow(wid, 2) + Math.pow(hei, 2), 1 / 2);//（长平方＋宽平方）开根 ，其实就是直角三角关系
  37.              if (i < length) {//通过SetInterval，按照Length方向每次运行1px
  38.                  if (org.x < now.x) {
  39.                      newxy.x = org.x +wid / length * i;
  40.                  }
  41.                  else {
  42.                      newxy.x = org.x - wid / length * i;
  43.                  }
  44.                  if (org.y < now.y) {
  45.                      newxy.y = org.y + hei / length * i;
  46.                  }
  47.                  else {
  48.                      newxy.y = org.y - hei / length * i;
  49.                  }
  50.  
  51.                  i++;
  52.              }
  53.              comment();
  54.          }
  55.          function comment() {
  56.              ctx.beginPath();
  57.              ctx.arc(newxy.x, newxy.y, 3, 0, Math.PI * 2, true);
  58.              ctx.stroke();
  59.  
  60.          }
  61.          function clean() {
  62.              ctx.clearRect(0, 0, canvas.width, canvas.height);
  63.          }
  64.          setInterval(function () {
  65.              clean();
  66.              init();
  67.          }, 10);
  68.          window.onload("load", init(), true);
  69.      </script>
  70.  
  71.  </body>
  72.  </html>

Canvas中点到点的路径运动的更多相关文章

  1. canvas 实现光线沿不规则路径运动

    canvas 实现光线沿不规则路径运动 此文章为原创,请勿转载 1.svg实现 2.canvas实现 3.坑点 svg让动画沿着不规则路径运动 查阅svg文档后发现,svg动画运动有两种实现方式,且都 ...

  2. WPF编程，通过Path类型制作沿路径运动的动画一种方法。

    原文:WPF编程,通过Path类型制作沿路径运动的动画一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/article/de ...

  3. 简单聊一聊那些svg的沿路径运动

    之前遇见动画就很想用css实现,显然有些效果是我们力所不能及,实现起来麻烦,效果不好,让人捉急.其实归结起来,不同的动画有自己的优势,根据实际情况进行取舍.本文就告诉大家如何用SVG写出个简单动画.就 ...

  4. u3d 逐个点运动，路径运动。 U3d one by one, path motion.

    u3d 逐个点运动,路径运动. U3d one by one, path motion. 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱:313134555@qq.com E-m ...

  5. WPF编程，通过Path类型制作沿路径运动的动画另一种方法。

    原文:WPF编程,通过Path类型制作沿路径运动的动画另一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/article/d ...

  6. ThreeJS模拟人沿着路径运动-路径箭头使用纹理offset偏移

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Canvas绘图中的路径描边与填充

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...

  8. [js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解

    路径在canvas绘图中,经常被用到,是一个非常重要的概念. 比如:我们要在canvas画出3条直线,要求用不同的颜色加以区分. <style> body { background: #0 ...

  9. OpenLayer实现路径运动

    近期由于业务的需求,让我这从未想过要碰Web Gis的业余前端开发者,走了Web Gis的开发道路.功能需求很简单,但却也是让自己难为了好几天.如,应该选择那个Gis框架,Gis框架的兼容性如何,直接 ...

随机推荐

  1. JavaScript onConflict 处理

    jQuery.noConflict用于释放jQuery和$两个全局变量. <!DOCTYPE html> <html> <head> <meta http-e ...

  2. Snake - SGU 128（构造多边形）

    题目大意:有N个点,如果可以使用这N个点连接,连接的时候任意两条边要成直角,任意边都要平行于x轴或者y轴,并且不能出现跨立相交,最终组成一个闭合的多边形,求出来这个多边形的最小长度. 分析:容易证明这 ...

  3. A Round Peg in a Ground Hole - POJ 1584 (判断凸多边形&判断点在多边形内&判断圆在多边形内)

    题目大意:首先给一个圆的半径和圆心,然后给一个多边形的所有点(多边形按照顺时针或者逆时针给的),求,这个多边形是否是凸多边形,如果是凸多边形在判断这个圆是否在这个凸多边形内.   分析:判断凸多边形可 ...

  4. 353. Design Snake Game

    贪食蛇. GAME OVER有2种情况,1是咬到自己,2是出界. 1)用QUEUE来保留占据的格子,每走一格就添加1个,然后POll()最后一个. 做一个一样的SET来check要走的格子是不是已经在 ...

  5. for循环++i效率

    偶然用到for循环 注意查看了一下 ++i的速度更快 这是PHP语言独有的 其他语言不会有这种情况

  6. Away3D 的实体收集器流程1

    View3D 顾名思义 它就是一个3D视口,视口的默认值是无穷大的,即相当于“窗口”是无限大的,我们看到的将是外面的所有景物即flash尺寸是视口的有效视域.传统电视的高宽比为4:3,现在的高清电视的 ...

  7. 遇到奇怪的C#/C/C++或者Java的bug可以去问问Coverity

    Coverity7月16号在博客Ask The Bug Guys中说以后遇到奇怪的C#/C/C++或者Java的bug可以给TheBugGuys@coverity.com发邮件.然后这些问题就会到一些 ...

  8. thymeleaf 和其它标签组合 获取数据

    thymeleaf 有很多的内置标签, 但是我们在开发中会引入其它很多标签, 这个时候, 后台数据过来了,前端 页面要怎么显示呢? 网上资料真的很少. 不过还是找到了答案:  th:attr 这个标签 ...

  9. etrace 跟踪程序函数动态执行流程

    https://github.com/elcritch/etrace 窗口1: 监控窗口,执行监控程序,显示监控结果 [root@monitor example]# pwd /root/etrace- ...

  10. ASP.NET Core和ASP.NET Framework共享Identity身份验证

    .NET Core 已经热了好一阵子,1.1版本发布后其可用性也越来越高,开源.组件化.跨平台.性能优秀.社区活跃等等标签再加上"微软爸爸"主推和大力支持,尽管现阶段对比.net ...