这个例子是我在网上看到,然后仿写的。
主要用到canvas画图。
首先,需要在页面上创建一个画布
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<canvas id="mycanvas" width="1200" height="600" style=""></canvas>
现在来开始画图:
先给出用到的参数:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
var ctx;
var updown; // 上下移动
var cwidth = 1200;
var cheight = 600;
var umbrellaArr = [];
var updownTime = 0; // 上下移动计时器
var rotateTime = 0; // 旋转计时器
var origin = 2; // 上下的原点
var rotateAngle = 0; // 上下的原点
步骤一:创建伞对象
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
// umbrella function Umbrella(ux,uy,ucolor){ this.x = ux; this.y = uy; this.fillStyle = ucolor; this.draw = drawUmbrella; this.move = moveUmbrella; }
步骤二:画伞
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
// draw umbrella function drawUmbrella(){ // 半圆 ctx.fillStyle = this.fillStyle; ctx.beginPath(); ctx.arc(this.x,this.y,30,0,Math.PI,true); ctx.closePath(); ctx.fill(); // 伞柄 ctx.fillRect(this.x - 1.5,this.y,1.5,40) ctx.beginPath() ctx.strokeStyle = this.fillStyle; ctx.arc(this.x - 5,this.y + 40,4,Math.PI,Math.PI * 2,true) // 伞钩 ctx.stroke() ctx.closePath() }
步骤三:初始化,可以画伞了
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
function init(){ ctx = document.getElementById('mycanvas').getContext('2d') ctx.translate(200,300) // 重置画图的原点 接下来画图都已 (200,300)位原点 for(var i = 0;i < 10;i++){ var umbrella = new Umbrella(i * 70, 0, "rgb(" + (30 * i) + "," + (255 - 30 * i) + ",255)") umbrellaArr.push(umbrella) umbrella.draw() } }
下面来实现上下移动的效果
步骤四:在上下移动的效果中,伞会出现位移,所以需要创建一个moveUmbrella函数
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
// 移动伞 function moveUmbrella(dx,dy){ this.x += dx this.y += dy }
步骤四:创建上下移动函数
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
function updownFunc(){ if(updownTime % 50 == 0){ origin = -origin } clearCanvas(-200,-300) updownTime ++; for(var i = 0; i < umbrellaArr.length;i++){ if(i % 2 == 0){ umbrellaArr[i].move(0,origin) }else{ umbrellaArr[i].move(0,-origin) } umbrellaArr[i].draw() } updownTime == 100 && clearInterval(updown) }
步骤五:查看效果,把初始化函数改一下
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
function init(){ ctx = document.getElementById('mycanvas').getContext('2d') ctx.translate(200,300) // 重置画图的原点 接下来画图都已 (200,300)位原点 for(var i = 0;i < 10;i++){ var umbrella = new Umbrella(i * 70, 0, "rgb(" + (30 * i) + "," + (255 - 30 * i) + ",255)") umbrellaArr.push(umbrella) } updown = setInterval(updownFunc, 100); }
使用window.onload()函数
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
window.onload = function () { init() }
下面来实现旋转效果:
步骤六:创建旋转函数
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
function rotateUmbrella(){ clearCanvas(-400,-300) rotateTime ++; for(var i = 0; i < umbrellaArr.length;i++){ ctx.save() // 保存初始的状态,方便画下一个伞 ctx.rotate(Math.PI * (2 / 4 + i / 4)) ctx.translate(0, rotateAngle) umbrellaArr[i].x = 0 umbrellaArr[i].y = 0 umbrellaArr[i].draw() ctx.restore() // 当第i 个伞画完之后,恢复到初始的状态 } rotateAngle ++; if(rotateAngle == 70){ rotateAngle = -rotateAngle } }
在这里会用到清除画布的函数:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
function clearCanvas(x,y){ ctx.clearRect(x,y,cwidth,cheight) }
步骤七:查看效果,把初始化的函数修改一下
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
function init(){ ctx = document.getElementById('mycanvas').getContext('2d') ctx.translate(200,300) // 重置画图的原点 接下来画图都已 (200,300)位原点 for(var i = 0;i < 10;i++){ var umbrella = new Umbrella(i * 70, 0, "rgb(" + (30 * i) + "," + (255 - 30 * i) + ",255)") umbrellaArr.push(umbrella) } updown = setInterval(updownFunc, 100); setTimeout(function () { // 10s 之后 改变伞的动画 clearInterval(updown); ctx.translate(300,0);//改变中心点 setInterval(rotateUmbrella, 100); }, 10000); }
好了 ,到这里,所有的效果都已经实现了,怎么样简单吧
运行效果:http://hjjia.github.io/js_exercises/demo-canvas/umbrella.html