給定一系列坐標(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>
效果如下
每次點開始都會重繪整個動畫，點擊暫停和繼續會在控制台打印日志，非暫停狀態下點擊繼續無效。
@原創版權所有，要轉載請注明出處，否則追究版權責任