给定一系列坐标(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. SQL Server (MSSQLSERVER) 服务由于下列服务特定错误而终止: %%17051

    问题出现:今天在给客户调试项目的时候,发现无法连接SQL server数据库 解决过程:1.在cmd命令窗口输入services.msc,打开服务窗口,找到SQL Server (MSSQLSERVE ...

  2. SpringBoot2.0整合mybatis、shiro、redis实现基于数据库权限管理系统

    转自https://blog.csdn.net/poorcoder_/article/details/71374002 本文主要介绍使用SpringBoot与shiro实现基于数据库的细粒度动态权限管 ...

  3. CentOS下rpm命令详解

    CentOS下rpm命令详解 rpm,Redhat Package Manager,即为红帽公司为RHEL开发的专用包管理器,后来更改为RPM Package Manager,类似于GNU项目,使用递 ...

  4. C++对象赋值问题

  5. Linux Shell自动交互/人机交互的三种方法

    如果你要学习linux,你可能会遇到Linux Shell自动交互问题,这里将介绍Linux Shell自动交互的解决方法,在这里拿出来和大家分享一下. 一.背景 shell脚本在处理自动循环或大的任 ...

  6. 0005-20180422-自动化第六章-python基础学习笔记

    day6 内容回顾: 1. 变量 2. 条件 3. while循环 4. 数据类型 - int - bit_length - bool - True/False - str - upper - low ...

  7. 基于CSS属性display:table的表格布局的使用

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...

  8. Jmeter登录后Session自动共享与多线程组并行

    在接口测试中,出于安全考虑接口是需要session才能访问.另外在此基础上,我们还可能模拟不同的客户端登录,需要并行运行移动端线程组. 实现session共享1)修改jmeter安装目录bin下的jm ...

  9. mysql日志介绍

    1. 错误日志 错误日志记录的事件: a. 服务器启动关闭过程中的信息 b. 服务器运行过程中的错误信息 c. 事件调试器运行一个事件时间生的信息 d. 在从服务器上启动从服务器进程时产生的信息 2. ...

  10. HTTPS（SSL / TLS）免费证书申请及网站证书部署实战总结

    服务器环境:windows server 2008  +  tomcat7 废话不多说,先看部署效果: 一.免费证书申请 Let's Encrypt  简介:let's Encrypt 是一个免费的开 ...