首页 > 代码库 > 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(); }
Html5 舞动的雨伞
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。