给定一系列坐标(x, y)点, 实现将各个点按照先后顺序连接起来的动画。还有两个要求：

1.点与点之间直接用线段连接, 不用考虑曲线

2.动画支持暂停, 继续, 重头开始播放功能

这个功能该怎么实现呢，我们首先会想到HTML5点新功能canvas。废话少说直接上实现代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>题2</title>

     <style type="text/css">

         textarea{

             height: 100px;

         }

         .btns{

             margin: 10px;

         }

         button{

             width: 80px;

         }

     </style>

 </head>

 <body>

     <canvas id="canvas" width="500" height="500"></canvas>

     <div>

         <label>坐标</label><textarea id="dots" type='text'></textarea>

         <button id='change'>修改</button>

     </div>

     <br/>

     <div class="btns">

         <button id='start'>开始</button>

         <button id='stop'>暂停</button>

         <button id='continue'>继续</button>

     </div>

     <script>

         //获取指定的canvas元素

         var canvas = document.getElementById('canvas');

         //调用canvas元素的getContext 方法访问获取2d渲染的上下文

         var context = canvas.getContext('2d');

         var dotarr = [{"x":280,"y":200},{"x":180,"y":150},{"x":100,"y":250},{"x":280,"y":300},{"x":180,"y":400},

 {"x":80,"y":350}];

         var isStop = false;

         document.getElementById('dots').value=JSON.stringify(dotarr);

         function drawline(dots){

             for(var i in dots){

                 //context.clearRect(0, 0, canvas.width, canvas.height)

                 //window.requestAnimationFrame(drawline,canvas);

                 var dot=dots[i];

                 var todot=dots[i];

                 var time='';

                 localStorage.setItem('length',dots.length);

                 if((parseInt(i)+1)<dots.length){

                     todot=dots[parseInt(i)+1];

                 }

                 (function(dot,todot,time,i){

                     time=setTimeout(function(){

                         //context.clearRect(0, 0, canvas.width, canvas.height)

                         context.beginPath();

                         context.moveTo(dot.x,dot.y);

                         context.lineTo(todot.x,todot.y);

                         localStorage.setItem('index',i);

                         localStorage.setItem("t", time);

                         context.closePath();

                         context.stroke();

                     },(parseInt(i)+1)*1000);

                 })(dot,todot,time,i)

             }

         }

         document.getElementById("change").onclick=function(){

             dotarr=JSON.parse(document.getElementById('dots').value);

         }

         document.getElementById("start").onclick=function(){

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

             var t=parseInt(localStorage.getItem("t"));

             var length=parseInt(localStorage.getItem('length'));

             isStop=true;

             for(var i=t;i<=(t+length);i++){

                 clearTimeout(i);

             }

             drawline(dotarr);

         }

         document.getElementById("stop").onclick=function(){

             var t=parseInt(localStorage.getItem("t"));

             var length=parseInt(localStorage.getItem('length'));

             isStop=true;

             for(var i=t;i<=(t+length);i++){

                 clearTimeout(i);

             }

             console.log('暂停');

         }

         document.getElementById("continue").onclick=function(){

             if(isStop){

                 var index=parseInt(localStorage.getItem('index'));

                 var newdots=dotarr.slice(index+1);

                 console.log(newdots);

                 drawline(newdots);

                 isStop=false;

                 console.log('继续');

             }

         }

     </script>

 </body>

 </html>

效果如下

每次点开始都会重绘整个动画，点击暂停和继续会在控制台打印日志，非暂停状态下点击继续无效。

@原创版权所有，要转载请注明出处，否则追究版权责任

canvas实现点连线动画的更多相关文章

  1. 神奇的canvas——点与线绘制的绚丽动画效果

    代码地址如下:http://www.demodashi.com/demo/11636.html 前言 之前在某网站上看到了一个canvas绘制的动画效果,虽然组成的元素很简单,只有点和线,但是视觉效果 ...

  2. WPF 画线动画效果实现

    原文:WPF 画线动画效果实现 弄了将近三天才搞定的,真是艰辛的实现. 看了很多博客,都太高深了,而且想要实现的功能都太强大了,结果基础部分一直实现不了,郁闷啊~ 千辛万苦终于找到了一个Demo,打开 ...

  3. 画线动画——SVG版和纯CSS版

    概述 我们常常在网站中看到一些画线的动画效果,非常炫酷,大多数这种画线动画效果是通过SVG实现的,也有不少是用纯css实现的,下面我总结了一下这2种方法,供以后开发时参考,相信对其他人也有用. 参考资 ...

  4. iOS - 高德地图将地图的多点连线

    @property (nonatomic, strong) MAPolyline *commonPoly; #pragma mark -- 将地图的点连线 - (void)createBrokenLi ...

  5. html5 canvas高级贝塞尔曲线运动动画(好吧这一篇被批的体无完肤！都说看不懂了！没办法加注释了！当然数学不好的我也没办法了，当然这还涉及到一门叫做计算机图形学的学科)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 第165天：canvas绘制圆环旋转动画

    canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...

  7. 一款基于HTML5 Canvas的画板涂鸦动画

    今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...

  8. Canvas制作的下雨动画

    简介 在codepen上看到一个Canvas做的下雨效果动画,感觉蛮有意思的.就研究了下,这里来分享下,实现技巧.效果可以见下面的链接. 霓虹雨: http://codepen.io/natewile ...

  9. HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版​

    HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...

随机推荐

  1. python练习题-day9

    2.写函数,检查获取传入列表或元组对象的所有奇数位索引对应的元素,并将其作为新列表返回给调用者. def dan_index(itter): li=[] for i in range(len(itte ...

  2. C#基础加强(2)之密闭类、静态类及扩展方法

    密闭类 简介 密闭类是被 sealed 关键字修饰的类,密闭类不能有子类.一般只有系统的一些基本类声明为密闭类,例如 String 类. 相关面试题 是否可以编写一个类继承自 String 类? 我们 ...

  3. centos共享目录

    使用VirtualBOX自带的共享文件夹功能 运行环境:  - 宿主机:windows 10  - 虚拟机:CentOS 7(我当初是按照Ubuntu环境下的教程弄的,所以其他Linux版本也可以参考 ...

  4. 使用dbeaver查mysql的表会导致锁表的问题

    查询完成之后接着需要使用rollback,不然其它session没法执行语句.

  5. keepalived weight正负值问题(实现主服务器nginx故障后迅速切换到备服务器)

    有两台负载均衡,lb01,lb02.  lb02, priority值为100 编辑keepalived配置文件   vim /etc/keepalived/keepalived.conf ! Con ...

  6. FAT32文件系统学习（上）

    2011-06-02 22:30:48 目的:需要编写SD读图片的底层驱动程序.所以要了解一个SD卡常用文件系统基本概念.累计学习用时2.5小时. 一,FAT32的保留区 1,引导扇区 :引导扇区是F ...

  7. Oracle经典书籍

    Oracle实用教程 深入浅出Oracle

  8. ORA-00600: internal error code, arguments: [kcblin_3], [103], [253952], [8192], [32769], [312], [640], [], [], [], [], []解决方法

    昨晚,一SQL执行的时候报了ORA-00600: internal error code, arguments: [kcblin_3], [103], [253952], [8192], [32769 ...

  9. JS设计模式（9）享元模式

    什么是享元模式? 定义:享元模式是一种优化程序性能的模式,本质为减少对象创建的个数. 主要解决:在有大量对象时,有可能会造成内存溢出,我们把其中共同的部分抽象出来,如果有相同的业务请求,直接返回在内存 ...

  10. URL和URI简单辨析

    URI 全称为 Universal Resource Identifier,统一资源标识符,用来唯一的标识一个资源. URL 全称为Universal Resource Locator,统一资源定位器 ...