/*随机生成两个点，然后以两点为端点，进行运动，主要使用了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. 模糊化GPU滤镜汇总

    GPUImageTiltShiftFilter 这是一个模糊图片上下两层的滤镜效果,可以调节模糊边界,可以调节模糊程度 总共4个参数,具体如下     //模糊度的调节,0为最清晰,后面越来越模糊   ...

  2. lightoj1017 dp

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

  3. 【设计模式 - 19】之观察者模式（Observer）

    1      模式简介 观察者模式的介绍: 观察者模式定义了对象之间的一对多依赖,这样一来,当一个对象的状态发生改变时,它的所有依赖者都会收到通知并自动更新. 发布者(被观察者) + 订阅者(观察者) ...

  4. memcache基本讲解

    Memcached技术 介绍: memcached是一种缓存技术, 他可以把你的数据放入内存,从而通过内存访问提速,因为内存最快的, memcached技术的主要目的提速, 在memachec 中维护 ...

  5. “发送至Onenote”惹来的小麻烦（转）

    原文来自 :  http://blog.csdn.net/yiyu_0417/article/details/7864172 [看到这篇文章,我觉得以后我也会遇到这个问题,很有价值我就先拷贝了,留着以 ...

  6. 关于Win8对getElementsByTagName等dom方法兼容性的替代方法

    在对Twebbrowser进行dom编程时,引用MSHTML并使用其中的HTMLDocument; IHTMLElementCollection;IHTMLElement;能获得较好的代码提示 其中封 ...

  7. 在32位Windows 8或Windows 7上安装Windows Phone 8 SDK

    这需要一点技巧的,其实WPSDK8是支持32位系统的,可因为微软脑残的限制,安装方法如下: 这里必需要有一个工具,OllyDbg 2.0,去官网下载即可. 启动OD,在菜单打开选项窗口,在Events ...

  8. Hadoop作业调度器

    随着 MapReduce 的流行,其开源实现 Hadoop 也变得越来越受推崇.在 Hadoop 系统中,有一个组件非常重要,那就是调度器.调度器是一个可插拔的模块,用户可以根据自己的实际应用要求设计 ...

  9. 了解Unicode编码

    制定Unicode编码标准的组织有两个,一个是国际标准化组织ISO,一个是多语言软件制造商组成的统一码联盟. 通用字符集UCS(Universal Character Set)是由ISO制定的编码方案 ...

  10. [转] Webpack 入门指迷

    大概算是一份教程吧, 只不过效果肯定不如视频演示之类的好.. Webpack 最近在英文社区上经常看到, 留了心, 但进一步了解是通过下边的视频:视频: How Instagram.com Works ...