L'animation HTML5 réalise un parapluie dansant

Cette fois je vais vous apporter une animation html5 pour réaliser le parapluie dansant. Quelles sont les précautions pour réaliser l'animation html5 pour danser le parapluie. jetons un coup d'oeil.

L'apprentissage de HMTL5 se fait par intermittence, et la méthode ne m'est plus inconnue J'ai fait une démo de parapluie hier, voyons d'abord l'effet

En utilisant principalement. le point central Méthodes de transformation et de rotation. Différentes animations sont contrôlées par timer

Voici tous les codes :

  <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>

Je trouve que c'est assez intéressant Est-ce que ces petites et belles choses vous donnent quelque chose. ? Inspiration.

Si l'objet n'est pas créé, le parapluie dessiné n'est pas facile à contrôler. Le code ci-dessous est un parapluie statique

  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="http://www.php.cn/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="http://www.php.cn/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="http://www.php.cn/js-tutorial-388834.html" target="_blank">Comment construire un serveur avec nodejs</a><br></p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!