html5动画实现舞动的雨伞

这次给大家带来html5动画实现舞动的雨伞 ，实现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();
            }

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

HTML5 Canvas实现的3D立方体波浪动画

下载

Nodejs路由与控制器的使用

Nodejs使用Mongoose创建模型及API 

怎样用nodejs搭建服务器