给定一系列坐标(x, y)点, 实现将各个点按照先后顺序连接起来的动画。还有两个要求：
1.点与点之间直接用线段连接, 不用考虑曲线
2.动画支持暂停, 继续, 重头开始播放功能
这个功能该怎么实现呢，我们首先会想到HTML5点新功能canvas。废话少说直接上实现代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>题2</title> 6 <style type="text/css"> 7 textarea{ 8 height: 100px; 9 } 10 .btns{ 11 margin: 10px; 12 } 13 button{ 14 width: 80px; 15 } 16 </style> 17 </head> 18 <body> 19 <canvas id="canvas" width="500" height="500"></canvas> 20 <div> 21 <label>坐标</label><textarea id="dots" type='text'></textarea> 22 <button id='change'>修改</button> 23 </div> 24 <br/> 25 <div class="btns"> 26 <button id='start'>开始</button> 27 <button id='stop'>暂停</button> 28 <button id='continue'>继续</button> 29 </div> 30 <script> 31 //获取指定的canvas元素 32 var canvas = document.getElementById('canvas'); 33 //调用canvas元素的getContext 方法访问获取2d渲染的上下文 34 var context = canvas.getContext('2d'); 35 var dotarr = [{"x":280,"y":200},{"x":180,"y":150},{"x":100,"y":250},{"x":280,"y":300},{"x":180,"y":400}, 36 {"x":80,"y":350}]; 37 var isStop = false; 38 document.getElementById('dots').value=JSON.stringify(dotarr); 39 function drawline(dots){ 40 for(var i in dots){ 41 //context.clearRect(0, 0, canvas.width, canvas.height) 42 //window.requestAnimationFrame(drawline,canvas); 43 var dot=dots[i]; 44 var todot=dots[i]; 45 var time=''; 46 localStorage.setItem('length',dots.length); 47 if((parseInt(i)+1)<dots.length){ 48 todot=dots[parseInt(i)+1]; 49 } 50 (function(dot,todot,time,i){ 51 time=setTimeout(function(){ 52 //context.clearRect(0, 0, canvas.width, canvas.height) 53 context.beginPath(); 54 context.moveTo(dot.x,dot.y); 55 context.lineTo(todot.x,todot.y); 56 localStorage.setItem('index',i); 57 localStorage.setItem("t", time); 58 context.closePath(); 59 context.stroke(); 60 },(parseInt(i)+1)*1000); 61 })(dot,todot,time,i) 62 } 63 } 64 document.getElementById("change").onclick=function(){ 65 dotarr=JSON.parse(document.getElementById('dots').value); 66 } 67 document.getElementById("start").onclick=function(){ 68 context.clearRect(0, 0, canvas.width, canvas.height); 69 var t=parseInt(localStorage.getItem("t")); 70 var length=parseInt(localStorage.getItem('length')); 71 isStop=true; 72 for(var i=t;i<=(t+length);i++){ 73 clearTimeout(i); 74 } 75 drawline(dotarr); 76 } 77 document.getElementById("stop").onclick=function(){ 78 var t=parseInt(localStorage.getItem("t")); 79 var length=parseInt(localStorage.getItem('length')); 80 isStop=true; 81 for(var i=t;i<=(t+length);i++){ 82 clearTimeout(i); 83 } 84 console.log('暂停'); 85 86 } 87 document.getElementById("continue").onclick=function(){ 88 if(isStop){ 89 var index=parseInt(localStorage.getItem('index')); 90 var newdots=dotarr.slice(index+1); 91 console.log(newdots); 92 drawline(newdots); 93 isStop=false; 94 console.log('继续'); 95 } 96 } 97 </script> 98 </body> 99 </html>
效果如下
每次点开始都会重绘整个动画，点击暂停和继续会在控制台打印日志，非暂停状态下点击继续无效。
@原创版权所有，要转载请注明出处，否则追究版权责任