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();}
View Code posted on -01-04 09:00 NET未来之路 阅读(...) 评论(...) 编辑 收藏
