Html5 舞动的雨伞

原文: Html5 舞动的雨伞

HMTL5的学习断断续续，方法不用又生疏了，昨天做的一个雨伞的Demo，先看看效果

主要是运用了中心点变换和旋转两个方法。不同的动画用定时器控制，

 

下面是全部代码：

  <canvas id="myCanve" width="1200" height="600"></canvas>

    <div  id="ta"></div>

    <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('2d');

            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 < 10; i++) {

                    ctx.save();

                    ctx.rotate(Math.PI * (2 / 4 + i / 4));

                      ctx.translate(0, -100);

                    //ctx.translate(70 * i, 0);

                    drawTop(ctx, "rgb(" + (30 * i) + "," + (255 - 30 * i) + ",255)");

                    drawGrip(ctx);

                    ctx.restore();

                }

            }



            window.onload=function() {

                draw();

            }

View Code