L'animation HTML5 réalise un parapluie dansant

  <canvas></canvas>
    <p></p>
    <script>
        var ctx;        var everything = [];        var cwidth = 1200;        var cheight = 600;        var updowntime = 0;        var rotatetime = 0;        var my = 2;        var updown;        var rotateangle = 0;        function Umbrellas(sx, sy, fillStyle) {            this.x = sx;            this.y = sy;            this.fillStyle = fillStyle;            this.draw = drawUmbrella;            this.moveit = moveumbrella;
        }        function drawUmbrella() {            //先画半圆            ctx.fillStyle = this.fillStyle;
            ctx.beginPath();
            ctx.arc(this.x, this.y, 30, 0, Math.PI, true);
            ctx.closePath();
            ctx.fill();            // ctx.save();            ctx.fillStyle = "blue";
            ctx.fillRect(this.x - 1.5, this.y, 1.5, 40);//画伞柄 是一个细长的矩形
            ctx.beginPath();
            ctx.strokeStyle = "blue";
            ctx.arc(this.x - 5, this.y + 40, 4, Math.PI, Math.PI * 2, true);//伞的钩子 是一个半圆
            ctx.stroke();
            ctx.closePath();
        }        function moveumbrella(dx, dy) {            this.x += dx;            this.y += dy;
        }        function init() {
            ctx = document.getElementById("myCanve").getContext(&#39;2d&#39;);
            ctx.translate(200, 300);            for (var i = 0; i < 10; i++) {                var um = new Umbrellas(i * 70, 0, "rgb(" + (30 * i) + "," + (255 - 30 * i) + ",255)");
                everything.push(um);
            }
            updown = setInterval(change, 100);
             setTimeout(function () {
                 clearInterval(updown);
                 ctx.translate(300,0);//改变中心点
                 setInterval(rotat, 100);
            }, 10000);         }        //updown  
        function change() {            if (updowntime % 50 == 0) {
                my = -my;
            }            // 清屏要关注到原中心点            clear(-200,-300);
            updowntime++;       
            for (var i = 0; i < everything.length; i++) {                if (i % 2 == 0) {
                    everything[i].moveit(0, my);
                } else {
                    everything[i].moveit(0, -my);
                }
                everything[i].draw();
            }
            $("#ta").html("坐标y:" + everything[0].y + "updowntime:" + updowntime);            //放在这才有效 在执行方法里面停止
            if (updowntime == 100) {
                clearInterval(updown);                //过渡方法            }
        }        //选择
        function rotat() {
            clear(-400, -300);
            rotatetime++;            for (var i = 0; i < everything.length; i++) {
                ctx.save();
                ctx.rotate(Math.PI * (2 / 4 + i / 4));
                ctx.translate(0, rotateangle);                // 统一坐标                everything[i].x = 0;
                everything[i].y = 0;
                everything[i].draw();
                ctx.restore();
            }
            rotateangle++;
            $("#ta").html("角度:" + rotateangle + "   rotatetime:" + rotatetime);            if (rotateangle == 70) {
                rotateangle = -rotateangle;
            }
        }        function clear(x,y) {
            ctx.clearRect(x, y, 1200, 600);
        }
        window.onload = function () {
            init();
        }    </script>

  function drawTop(ctx,fillStyle) {
                ctx.fillStyle = fillStyle;
                ctx.beginPath();
                ctx.arc(0, 0, 30, 0, Math.PI, true);
                ctx.closePath();
                ctx.fill();
            }
            function drawGrip(ctx) {
                ctx.save();
                ctx.fillStyle = "blue";
                ctx.fillRect(-1.5, 0, 1.5, 40);
                ctx.beginPath();
                ctx.strokeStyle = "blue";
                ctx.arc(-5, 40, 4, Math.PI, Math.PI * 2, true);
                ctx.stroke();
                ctx.closePath();
                ctx.restore();
            }
            function draw() {
                var ctx = document.getElementById("myCanve").getContext("2d");
                ctx.translate(150, 150);
                for (var i = 0; i <p> Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP ! </p><p>Lecture recommandée : </p><p style="text-align: left;"><a href="//m.sbmmt.com/js-tutorial-388844.html" target="_blank">L'utilisation du routage et des contrôleurs Nodejs</a><br></p><p style="text-align: left;"><a href="//m.sbmmt.com/js-tutorial-388840.html" target="_blank">Nodejs utilise Mongoose pour créer des modèles et des API </a> <br></p><p style="text-align: left;"><a href="//m.sbmmt.com/js-tutorial-388834.html" target="_blank">Comment construire un serveur avec nodejs</a><br></p>