给定一系列坐标(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. centos6 安装python2.7 并做软件兼容处理 及 MySQLdb模块安装

    相关软件准备 https://www.python.org/ftp/python/2.7.15/Python-2.7.15.tgz https://pypi.org/project/setuptool ...

  2. app优化篇

    UIImageView高效加个圆角 一般通过clipsToBounds和layer.cornerRadius会强制Core Animation提前渲染屏幕的离屏绘制,影响性能. 通过贝塞尔曲线切割图片 ...

  3. Android studio中导入SlidingMenu问题

    我们导入的library文件夹中的build.gradle 文件里面写的很清楚: android {     compileSdkVersion 17     buildToolsVersion &q ...

  4. docker+elasticsearch的安装

    查询镜像 [root@ elasticsearch]# docker search elasticsearch INDEX NAME DESCRIPTION STARS OFFICIAL AUTOMA ...

  5. 【Tools】-NO.93.Tools.5.pyCharm-【pyCharm 安装与破解配置】-

    1.0.0 Summary Tittle:[Tools]-NO.93.Tools.5.pyCharm-[pyCharm 安装与破解配置]- Style:Tools Series:Tools Since ...

  6. Tomcat服务安全加固

    Tomcat服务默认启用了管理后台功能,使用该后台可直接上传 war 文件包对站点进行部署和管理.由于运维人员的疏忽,可能导致管理后台存在空口令或者弱口令的漏洞,使得黑客或者不法分子可以利用该漏洞直接 ...

  7. HBase笔记5（诊断）

    阻塞急救: RegionServer内存设置太小: 解决方案: 设置Region Server的内存要在conf/hbase-env.sh中添加export HBASE_REGIONSERVER_OP ...

  8. windows程序设计 创建一个新的窗口

    #include <windows.h> LRESULT CALLBACK myProc(HWND, UINT, WPARAM, LPARAM); int WINAPI WinMain(H ...

  9. Nginx技术研究系列4-Nginx监控-Nginx+Telegraf+Influxb+Grafana

    搭建了Nginx集群后,需要继续深入研究的就是日常Nginx监控. Nginx如何监控?相信百度就可以找到:nginx-status 通过Nginx-status,实时获取到Nginx监控数据后,如何 ...

  10. MySQL外键约束_ON DELETE CASCADE/ON UPDATE CASCADE

    MySQL通过外键约束实现数据库的参照完整性,外键约束条件可在创建外键时指定,table的存储引擎只能是InnoDB,因为只有这种存储模式才支持外键. 外键约束条件有以下4种: (1)restrict ...