Html5 舞动的雨伞-白红宇

原文:

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

跳舞的雨伞

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

下面是全部代码：

自己觉得蛮有意思，这些小而美的东西是不是给你有所启发呢。

如果不是建立对象，则画出来的雨伞不容易控制。下面的代码就是静态的雨伞

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