/*随机生成两个点，然后以两点为端点，进行运动，主要使用了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. IIS7 上传 下载文件大小限制的设置

    IIS7 上传 下载文件大小限制的设置 本文来自IISBOY网 一.找到修改大小的配置文件和配置节点 本文来自IISBOY网 打开你系统盘(我是C盘),找到 C:\Windows\System32\i ...

  2. JavaScript高级程序设计21.pdf

    第10章 DOM DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口) IE中所有DOM对象都是以COM对象的形式实现的,这意味着IE中的对象与原生JavaScript对象 ...

  3. MRTG开源监控安装手册

    环境要求: CentOS6以上版本 2G内存 16G存储 源码包下载:第一部分:下载,第二部分:下载 1.安装snmp: yum install -y net-snmp net-snmp-devel ...

  4. php 下载

    $file='url.xlsx'; if (file_exists(EA_DIR_DATA . $file)) {            header('Content-Description: Fi ...

  5. Java 交换两个变量的数值

    一.参数传递方法 为解决标题问题,首先介绍参数传递方法.目前各类程序设计语言的参数传递方法主要有三种: 按值传递 按引用传递 按指针传递 其中按值传递表示方法(函数)接收的是调用者提供的变量的拷贝,不 ...

  6. 【转】eclipse插件：OpenExplorer快速打开文件目录

    在MyEclipse开发中常用到其中一个"Open In Explorer"的小插件,可以直接进入Windows资源管理器中打开选中文件所在的目录,在使用eclipse开发时也很需 ...

  7. web socket 心跳包的实现方案

    web socket 心跳包的实现方案05/30/2010 现在网络环境错综复杂,socket心跳包是获得健康强壮的连接的有效解决方案,今天,我们就在web socket中实现心跳包方案,是的,尽管我 ...

  8. Marketplace Client- Download

    Marketplace是Java平台被广泛使用的IDE(集成开发环境)Eclipse的软件商店.上面有个有种牛X的插件,可根据自己需要下载. Eclipse Marketplace官网地址:http: ...

  9. Java基础知识强化之集合框架笔记21：数据结构之 数组 和 链表

    1. 数组 2. 链表

  10. 零基础学习云计算及大数据DBA集群架构师【预科2015年12月14日周一】

    1.第一天比较轻松,上午填表格,录指纹,拍照片,做自我介绍. 2.下午老师简单介绍了一下PC\交换机\路由器\塔式服务器\机架式服务器(1U\2U)\刀片服务器\磁带机 3.班主任陈老师朱老师,预科秦 ...