HTML5-Animation realisiert tanzenden Regenschirm

Dieses Mal bringe ich Ihnen eine HTML5--Animation , um den tanzenden Regenschirm zu realisieren. Was sind die Vorsichtsmaßnahmen, um die HTML5-Animation zum Tanzen des Regenschirms zu realisieren? Werfen wir einen Blick darauf.

Das Erlernen von HMTL5 ist zeitweise und die Methode ist nicht mehr unbekannt. Ich habe gestern eine Umbrella-Demo erstellt. Schauen wir uns zuerst den Effekt an.

Hauptsächlich mit der Mittelpunkt Transformations- und Rotationsmethoden. Verschiedene Animationen werden per Timer gesteuert

Hier sind alle 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>

Ich finde es ziemlich interessant, dass dir diese kleinen und schönen Dinge etwas bringen ? Inspiration.

Wenn das Objekt nicht erstellt wird, ist der gezeichnete Regenschirm nicht leicht zu kontrollieren. Der folgende Code ist ein statischer Regenschirm

  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  Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! <p></p>Empfohlene Lektüre: <p></p><p style="text-align: left;">Die Verwendung von Nodejs-Routing und -Controllern<a href="http://www.php.cn/js-tutorial-388844.html" target="_blank"></a><br></p><p style="text-align: left;">Nodejs verwendet Mongoose, um Modelle und APIs zu erstellen <a href="http://www.php.cn/js-tutorial-388840.html" target="_blank"> </a><br></p><p style="text-align: left;">So erstellen Sie einen Server mit NodeJS<a href="http://www.php.cn/js-tutorial-388834.html" target="_blank"></a><br></p>

Das obige ist der detaillierte Inhalt vonHTML5-Animation realisiert tanzenden Regenschirm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!