/*随机生成两个点，然后以两点为端点，进行运动，主要使用了SetInterval,对画布进行不断的擦除描绘的操作*/
1 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

 </head>

 <body>

     <canvas id="dir" width="300" height="300"></canvas>

     <script type="text/javascript">

         var canvas = document.getElementById("dir");

         var ctx = canvas.getContext("2d");

         var org = {

             x: Math.random()*canvas.width,

             y: Math.random() * canvas.height

         };

         var now = {

             x: Math.random() * canvas.width,

             y: Math.random() * canvas.height

         };

         var newxy = {

             x: 0,

             y: 0

         };

         function init() {

             ctx.beginPath();

             ctx.moveTo(org.x, org.y);

             ctx.lineTo(now.x, now.y);

             ctx.stroke();

             math();

         }

         var i = 1;

         function math() {

             var wid = Math.abs(now.x - org.x);//x轴的长，绝对值

             var hei = Math.abs(now.y - org.y);//y轴长

             var length = Math.pow(Math.pow(wid, 2) + Math.pow(hei, 2), 1 / 2);//（长平方＋宽平方）开根 ，其实就是直角三角关系

             if (i < length) {//通过SetInterval，按照Length方向每次运行1px

                 if (org.x < now.x) {

                     newxy.x = org.x +wid / length * i;

                 }

                 else {

                     newxy.x = org.x - wid / length * i;

                 }

                 if (org.y < now.y) {

                     newxy.y = org.y + hei / length * i;

                 }

                 else {

                     newxy.y = org.y - hei / length * i;

                 }

                 i++;

             }

             comment();

         }

         function comment() {

             ctx.beginPath();

             ctx.arc(newxy.x, newxy.y, 3, 0, Math.PI * 2, true);

             ctx.stroke();

         }

         function clean() {

             ctx.clearRect(0, 0, canvas.width, canvas.height);

         }

         setInterval(function () {

             clean();

             init();

         }, 10);

         window.onload("load", init(), true);

     </script>

 </body>

 </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. 工作总结之动画与VR

    一.Unity5的动画新特性: 1.animator controller默认就包含Any State.Entry.Exit三个状态 2.animator可以给每个动画片段添加脚本,该脚本继承 Sta ...

  2. lightoj 1036 dp

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1036 #include <cstdio> #include <cst ...

  3. hdoj 1061 Rightmost Digit【快速幂求模】

    Rightmost Digit Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  4. redis.config翻译

    # Redis configuration file example#redis配置文件范例 # Note on units: when memory size is needed, it is po ...

  5. IAAS云计算产品畅想-云主机产品内涵

    这里所涉及的主要还是狭义的云主机产品. 主要还是谈云主机产品中公有云产品与私有云产品相比赋予更多的含义: 产品广义理解:公有云主机的最大特点就是基础资源按需支付 从这一句话中可以体现出来两个含义: 产 ...

  6. Linux 搭建SVN server

    一. SVN 简单介绍 Subversion(SVN) 是一个开源的版本号控制系統, 也就是说 Subversion 管理着随时间改变的数据. 这些数据放置在一个中央资料档案库 (repository ...

  7. IIS7 和IIS8.0 HTTP 错误 500.19 - Internal Server Error 问题的解决方式

    百度了好久,没找到解决这个问题确切的答案,我也知道肯定是权限的问题,当然,经过一番尝试之后,最终攻克了,解决之道例如以下(个人方法,能够一试): 1.找到你的配置文件所在的目录,我的是 E:\源代码\ ...

  8. MySQL 错误日志(Error Log)

    同大多数关系型数据库一样,日志文件是MySQL数据库的重要组成部分.MySQL有几种不同的日志文件.通常包括错误日志文件,二进制日志,通用日志,慢查询日志,等等. 这些日志能够帮助我们定位mysqld ...

  9. android 58 jvm和dvm的区别（Dalvil VM）

    java程序在jvm和dvm的执行过程: #jvm和dvm的区别(Dalvil VM) 谷歌刚开发的安卓系统用的就是JVM,JVM版权属于sun公司也就是Oracle公司,后来用的是DVM,由于版权问 ...

  10. 跟踪MYSQL 的查询优化过程方法

    http://dev.mysql.com/doc/internals/en/tracing-example.html http://blog.chinaunix.net/uid-20785090-id ...