给定一系列坐标(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. ARGB 颜色取值与透明度对照表

    1.  ARGB 依次代表透明度(alpha).红色(red).绿色(green).蓝色(blue). 2. 透明度分为256阶(0-255),计算机上用16进制表示为(00-ff).透明就是0阶,不 ...

  2. python之wtforms组件

    作用 生成 HTML 表单. form 表单验证. 基本使用 安装 pip3 install wtforms 示例 登录 from flask import Flask, render_templat ...

  3. A标签中 href 和 onclick用法、区别、优先级别

    (内容摘自:https://blog.csdn.net/chenchunlin526/article/details/77346049) Html A标签中 href 和 onclick 同时使用的问 ...

  4. PHP中array_merge和array+array的区别

    在PHP中可以使用array_merge函数和两个数组相加array+array的方式进行数组合并,但两者效果并不相同,区别如下: 当下标为数值时,array_merge()不会覆盖掉原来的值,但ar ...

  5. redis安装及错误排查

    安装: 1.cd /usr/redis   //redis目录作为安装目录,没有自行创建 2.tar xzf  redis-4.0.6.tar.gz 3. cd redis-4.0.6 4.make ...

  6. 百度富文本Ueditor编辑器的使用

    往在web开发的时候,尤其是在网站开发后台管理系统的时候经常会使用到富文本编辑器,这里我们来使用百度提供的富文本编辑器UEditor,以提高我们的开发效率 UEditor官网下载地址:https:// ...

  7. 让hive的表注释和字段注释支持中文

    此处用的数据库类型为mysql.发现hive在初始化创建这些表的时候,大部分字段的字符集给设置成了latin1,然后collation设成了latin1_bin. 但是我们在hive中创建表时,表注释 ...

  8. Oracle expdp impdp中 exclude/include 的使用

    exclude和include参数能够在使用expdp或impdp是对特定的对象或对象类型进行筛选或过滤.比如因工作的需要导出特定的表或不导出特定的表.视图以及存储过程.索引.约束.授权统计信息等等. ...

  9. IDEA中文出现乱码解决（转）

    转自:http://lcl088005.iteye.com/blog/2284696 我是个idea的忠实用户,新公司的项目都是用eclipse做的,通过svn拉下代码后发现,注释的内容里,中文内容都 ...

  10. Hdu2040 亲和数

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2040 亲和数 Time Limit: 2000/1000 MS (Java/Others)    Me ...