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();
            }