html5动画实现舞动的雨伞

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

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

下面是全部代码：

 <canvas id="myCanve" width="1200" height="600"></canvas>
 <p id="ta"></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('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();
 }

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

推荐阅读：

Nodejs路由与控制器的使用

Nodejs使用Mongoose创建模型及API

怎样用nodejs搭建服务器