canvas实现点连线动画

给定一系列坐标(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>

View Code

效果如下

每次点开始都会重绘整个动画，点击暂停和继续会在控制台打印日志，非暂停状态下点击继续无效。

canvas实现点连线动画

猜你喜欢