用canvas画会旋转的伞

<canvas id="mycanvas" width="1200" height="600" style=""></canvas>

 var ctx;
        var updown; // 上下移动
        var cwidth      = 1200;
        var cheight     = 600;
        var umbrellaArr = [];
        var updownTime  = 0;  // 上下移动计时器
        var rotateTime  = 0;  // 旋转计时器
        var origin      = 2; // 上下的原点
        var rotateAngle = 0; // 上下的原点

// umbrella
        function Umbrella(ux,uy,ucolor){
            this.x         = ux;
            this.y         = uy;
            this.fillStyle = ucolor;
            this.draw      = drawUmbrella;
            this.move      = moveUmbrella;
        }

// draw umbrella
        function drawUmbrella(){
            // 半圆
            ctx.fillStyle = this.fillStyle;
            ctx.beginPath();
            ctx.arc(this.x,this.y,30,0,Math.PI,true);
            ctx.closePath();
            ctx.fill();

            // 伞柄
            ctx.fillRect(this.x - 1.5,this.y,1.5,40)
            ctx.beginPath()
            ctx.strokeStyle = this.fillStyle;
            ctx.arc(this.x - 5,this.y + 40,4,Math.PI,Math.PI * 2,true) // 伞钩
            ctx.stroke()
            ctx.closePath()
        }

function init(){
            ctx = document.getElementById(‘mycanvas‘).getContext(‘2d‘)
            ctx.translate(200,300) // 重置画图的原点  接下来画图都已 （200,300）位原点

            for(var i = 0;i < 10;i++){
                var umbrella = new Umbrella(i * 70, 0, "rgb(" + (30 * i) + "," + (255 - 30 * i) + ",255)")
                umbrellaArr.push(umbrella)
                umbrella.draw()
            }

         
        }                

// 移动伞
        function moveUmbrella(dx,dy){
            this.x += dx
            this.y += dy
        }

 function updownFunc(){

            if(updownTime % 50 == 0){
                origin = -origin
            }

            clearCanvas(-200,-300)
            updownTime ++;

            for(var i = 0; i < umbrellaArr.length;i++){
                if(i % 2 == 0){
                    umbrellaArr[i].move(0,origin)
                }else{
                    umbrellaArr[i].move(0,-origin)
                }
                umbrellaArr[i].draw()
            }

            updownTime == 100 && clearInterval(updown)

        }

function init(){
            ctx = document.getElementById(‘mycanvas‘).getContext(‘2d‘)
            ctx.translate(200,300) // 重置画图的原点  接下来画图都已 （200,300）位原点

            for(var i = 0;i < 10;i++){
                var umbrella = new Umbrella(i * 70, 0, "rgb(" + (30 * i) + "," + (255 - 30 * i) + ",255)")
                umbrellaArr.push(umbrella)
            }

            updown = setInterval(updownFunc, 100);
        }

window.onload = function () {
            init()
        }

function rotateUmbrella(){
            clearCanvas(-400,-300)
            rotateTime ++;

            for(var i = 0; i < umbrellaArr.length;i++){
                ctx.save() // 保存初始的状态，方便画下一个伞
                ctx.rotate(Math.PI * (2 / 4 + i / 4))
                ctx.translate(0, rotateAngle)

                umbrellaArr[i].x = 0
                umbrellaArr[i].y = 0
                umbrellaArr[i].draw()

                ctx.restore()  // 当第i 个伞画完之后，恢复到初始的状态
            }

            rotateAngle ++;

            if(rotateAngle == 70){
                rotateAngle = -rotateAngle
            }

        }

 function clearCanvas(x,y){
            ctx.clearRect(x,y,cwidth,cheight)
        }

function init(){
            ctx = document.getElementById(‘mycanvas‘).getContext(‘2d‘)
            ctx.translate(200,300) // 重置画图的原点  接下来画图都已 （200,300）位原点

            for(var i = 0;i < 10;i++){
                var umbrella = new Umbrella(i * 70, 0, "rgb(" + (30 * i) + "," + (255 - 30 * i) + ",255)")
                umbrellaArr.push(umbrella)
            }

            updown = setInterval(updownFunc, 100);
            setTimeout(function () { // 10s 之后  改变伞的动画
                clearInterval(updown);
                ctx.translate(300,0);//改变中心点
                setInterval(rotateUmbrella, 100);
            }, 10000);
        }