要实现这个效果，需要了解两个方面的知识

1、如何画一颗多角星？

画一颗多角星可以先引入两个同心圆，一个大圆，一个小圆，然后根据多角星的角数来均分圆面，再根据一定的条件将大圆小圆的和均分线相交的点连接起来就组成了一个多角星，下图演示了四角星的画法实现：

2、弹性系数公式

初始：

cx = sx

cy = sy

变换：

vx+=(tx-cx)*spring

vy+=(ty-cy)*spring

cx=vx*=friction

cy=vy*=friction

参数意义：

sx起始位置X

sy起始位置y

tx目标位置X

ty目标位置y

cx变换位置x

cy变换位置y

vx变换速度x

vy变换速度y

friction摩擦系数

spring弹性系数
示例代码:

var Spring = (function(){
        var canvas,ctx,W,H,total,gadgets,t;
        function init(){
                canvas = document.createElement("canvas");
                ctx = canvas.getContext("2d");
                W = window.innerWidth;
                H = window.innerHeight;
                canvas.width = W;
                canvas.height = H;
                document.body.appendChild(canvas);
                total = 8;
                gadgets = [];
                create();
                t = setInterval(draw,60);
                document.getElementById("start").onclick = function(){
                        t && clearInterval(t);
                        create();
                        t = setInterval(draw,60);
                }
        }
        function create(){
                gadgets.length = 0;
                for(var i=0;i<total;i++){
                        var startx = rand(60,W-60),
                                starty = rand(-150,0);
                        var gobj = {
                                startx : startx,
                                starty : starty,
                                changex : startx,
                                changey : starty,
                                endx : startx,
                                endy : rand(150,500),
                                vx : 0,
                                vy : 0,
                                spring : rand(0.6,0.9),
                                friction : rand(0.5,0.7),
                                outR : rand(35,65),
                                color : randColor(),
                                starcolor : randColor()
                        };
                        gadgets.push(gobj);
                }
        }
        function draw(){
                ctx.clearRect(0,0,W,H);
                for(var i=0;i<gadgets.length;i++){
                        var g = gadgets[i];
                        g.vx += (g.endx-g.changex)*g.spring;
                        g.vy += (g.endy-g.changey)*g.spring;
                        g.changex += (g.vx *= g.friction);
                        g.changey += (g.vy *= g.friction);
                        ctx.beginPath();
                        ctx.strokeStyle = g.color;
                        ctx.moveTo(g.startx,g.starty);
                        ctx.lineTo(g.changex,g.changey);
                        ctx.lineWidth = 5;
                        ctx.closePath();
                        ctx.stroke();
                        drawStar(g.changex,g.changey,g.outR,g.starcolor);
                }
        }
        function drawStar(x,y,outR,color){
                ctx.save();
                ctx.translate(x,y);
                var num = 10,inrAr=outR/2,arr = [];
                var angle = 2*Math.PI/num;
                ctx.rotate(angle/2);
                ctx.strokeStyle = color;
                for(var i=0;i<num;i++){
                        if(i&1){
                                arr.push({
                                        x : outR * Math.cos(angle*i),
                                        y : outR * Math.sin(angle*i)
                                })
                        }else{
                                arr.push({
                                        x : inrAr * Math.cos(angle*i),
                                        y : inrAr * Math.sin(angle*i)
                                })
                        }
                }
                ctx.beginPath();
                ctx.moveTo(arr[0].x,arr[0].y);
                for(var i=1;i<arr.length;i++){
                        ctx.lineTo(arr[i].x,arr[i].y);
                }
                ctx.fillStyle = "#fff";
                ctx.fill();
                ctx.closePath();
                ctx.stroke();
                ctx.restore();
        }
        function randColor(){
                return "rgb("+(~~(Math.random()*255)) + "," + (~~(Math.random()*255)) +","+(~~(Math.random()*255))+")";
        }
        function rand(min,max){
                return Math.random() * (max-min) + min;
        }
        return { 
                init : init
        }
})();

在线demo：http://demo.deanhan.cn/Spring/