给定一系列坐标(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. 17.0-uC/OS-III消息管理

    消息传递 有些情况下任务或ISR与另一个任务间进行通信,这种信息交换叫做作业间的通信. 可以有两种方法实现这种通信: 全局变量. 发送消息. 1.果使用全局变量,任务或ISR就须确保它独占该变量.如果 ...

  2. async await 的使用。 其实就是和then一样，只不过改变了链式写法

    这样写显得更加舒服.

  3. 基于Windows的git代码统计工具GitStats

    参考: https://blog.csdn.net/windfromthesouth/article/details/72961525

  4. cocos2d-x JS 本地玩家位置跟服务器玩家位置转换相关

    //各种游戏人数情况下的本地位置配置mb.LOCAL_POS_LIST = { 2 : [0, 2], 3 : [0, 1, 3], 4 : [0, 1, 2, 3]}; /*------------ ...

  5. CentOS 7 搭建CA认证中心实现https取证

    CA认证中心简述 CA :CertificateAuthority的缩写,通常翻译成认证权威或者认证中心,主要用途是为用户发放数字证书 功能:证书发放.证书更新.证书撤销和证书验证. 作用:身份认证, ...

  6. 221. Maximal Square(动态规划)

    Given a 2D binary matrix filled with 0's and 1's, find the largest square containing only 1's and re ...

  7. sitecore开发入门之Sitecore字典结构最佳实践

    使用Sitecore时,一个重要的主题是如何为您的网站处理不同的语言和区域.Sitecore对此的回答是使用字典项,它基本上只代表键/值定义.但是,这个字典项可以设置为具有不同的语言版本,这几乎允许您 ...

  8. mongodb 安装遇到问题：the domain,user name and/or password are incorrect.remember to use"." for the domain if the account is on the local machine

    安装mongoDB遇到如下问题:the domain,user name  and/or password are incorrect.remember to use"." for ...

  9. Vue单元测试Karma+Mocha

    Vue单元测试Karma+Mocha Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner).该工具在Vue中的主要作用是将项目运行在各种主流Web浏览 ...

  10. BDD数据集（mask_rcnn）1

    mask_rcnn中ballon的例子 classsification VS semantic segmention VS object detection VS instance segmentio ...