Home  >  Article  >  Web Front-end  >  HTML5 animation realizes dancing umbrella

HTML5 animation realizes dancing umbrella

php中世界最好的语言
php中世界最好的语言Original
2018-03-16 14:36:412107browse

This time I will bring you html5animationrealizing a dancing umbrella and what are the precautions for realizing a dancing umbrella in html5 animation. The following is a practical case, let’s take a look.

I have been learning HMTL5 intermittently, and the methods are no longer unfamiliar. I made an umbrella demo yesterday, let’s see the effect first

HTML5 animation realizes dancing umbrella

Mainly using the center point Transform and rotate methods. Different animations are controlled by timer.

Here are all the 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>

I think it is quite interesting. Do these small and beautiful things inspire you? .

If the object is not created, the drawn umbrella is not easy to control. The following code is a static umbrella

  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> I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website! </p><p>Recommended reading: </p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-388844.html" target="_blank">Using Nodejs routing and controllers</a><br></p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-388840.html" target="_blank">Nodejs uses Mongoose to create models and APIs </a> <br></p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-388834.html" target="_blank">How to build a server with nodejs</a><br></p>

The above is the detailed content of HTML5 animation realizes dancing umbrella. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn