html5 canvas气泡动画

写了一个简单的demo，用canvas实现一个气泡的动画，点击画布的时候增加气泡。当气泡碰撞到画布边缘的时候会反弹回来，能同时改变颜色。

思路：

画布的宽度为w,高度为y,球的半径为为r

每个新生成的气泡有2个随机值，一个表示x轴方向的移动比例movex，一个表示y轴方向的移动比例movey。

当气泡移动到左上角、左下角、右下角、右上角的时候movex,movey反向

当气泡移动到左边缘和右边缘的时候，movex反向

当气泡移动到上边缘和下边缘的时候，movey反向

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">#bubble{border:1px solid black;}</style></head><body><div><canvas id="bubble" width="400px" height="400px"></canvas></div><script>var canvas=document.getElementById('bubble');var ctx=canvas.getContext('2d');var w=ctx.canvas.width;var h=ctx.canvas.height;var color=['#ffc0cb','#dda0dd','#9370db','#6495ed','#87cefa','#ffffff','#fa8072','#a0522d','#ff8c00','#008000'];var value=[];//气泡半径var r=20;//画气泡function drawBubble(x,y,r,n){ctx.save();var i=n%(color.length);ctx.globalAlpha=0.3;ctx.strokeStyle='rgba(0,0,0,0.5)';ctx.lineWidth=2;ctx.fillStyle=color[i];ctx.beginPath();ctx.moveTo(x,y);ctx.arc(x,y,r,0,2*Math.PI,true);ctx.stroke();ctx.closePath();//设置阴影ctx.shadowBlur=7;ctx.shadowColor='#fff';ctx.shadowOffsetX=10;ctx.shadowOffsetY=-6;ctx.fill();//画光圈ctx.beginPath();ctx.strokeStyle='rgba(255,255,255,0.5)';ctx.lineCap='round';ctx.lineWidth=3;ctx.arc(x,y,r/2,(Math.PI*2)/0.9,(Math.PI*2),true);ctx.stroke(); ctx.restore();}//放数据function putValue(x,y,mx,my){var temp={};temp.color=0;temp.x=x;temp.y=y;temp.movex=mx;temp.movey=my;value.push(temp);}//移动function move(){//ctx.restore();value.forEach(function(item,index){var newx=item.x+item.movex*15;var newy=item.y+item.movey*15;//判断是否到达边界if(newx>r&&newx<(w-r)&&newy>r&&newy<(h-r)){drawBubble(newx,newy,r,item.color);item.x=newx;item.y=newy;}else if((newx>=(w-r)&&newy>=(h-r))||(newx>=(w-r)&&newy<r)||(newx<r&&newy<r)||(newx<r&&newy>(h-r)))//角{//换颜色item.color++;item.color=item.color%color.length;drawBubble(newx,newy,item.color);item.x=newx;item.y=newy;item.movex=0-item.movex;item.movex=0-item.movex;}else if(newx>=(w-r)||newx<r)//左右边{item.color++;item.color=item.color%color.length;drawBubble(newx,newy,item.color);item.x=newx;item.y=newy;item.movex=0-item.movex;}else if(newy>=(h-r)||newy<r)//上下边{item.color++;drawBubble(newx,newy,item.color);item.color=item.color%color.length;item.x=newx;item.y=newy;item.movey=0-item.movey;}});}function draw(x,y){drawBubble(x,y,r,0);var mx=Math.random()-0.5;var my=Math.random()-0.5;putValue(x,y,mx,my);}ctx.fillStyle='#000';ctx.fillRect(0,0,w,h);draw(w/2,h/2);//设置间隔性定时器setInterval(function(){ctx.clearRect(0,0,w,h);ctx.fillStyle='#000';ctx.fillRect(0,0,w,h);move();console.log(value);},100); canvas.οnclick=function(evt){draw(evt.pageX,evt.pageY);}</script></body>
</html>

最终效果：

不过气泡和气泡之间的碰撞反弹，还没有想到比较好的方法来处理。

html5 canvas气泡动画相关推荐

html5在线制作教程,HTML5 Canvas 制作动画
HTML5 Canvas 制作动画在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果. 在线示例要在HTML5画布上绘制 ...
html5字体动画效果,7款超华丽的HTML5 Canvas文字动画特效
原标题:7款超华丽的HTML5 Canvas文字动画特效文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这 ...
html5绘制菱形,HTML5 canvas 菱形动画齿轮 - 开源中国
原创. 通过 HTML5 canvas 创造由18个菱形构成的齿轮,并产生动画效果. An animation is made of the wheel consisting 18 diamends. ...
html图像粒子转换动画,html5 canvas粒子动画生成图片特效
特效描述:html5 canvas 粒子动画生成图片特效.html5基于canvas粒子化图片利用easying.js公式计算粒子动态轨迹方程, x轴方向和y轴方向的公式均可以选择可以设置粒子运 ...
如何用html5编写彩色同心圆,HTML5 canvas 同心圆动画
原创.产生的动画效果: * 生成文字渐变颜色随时间的变化. * 使得一组同心圆的取色,随时间而变化 1.[图片] open_source.png 2.[代码][JavaScript]代码 var c= ...
Div层悬浮实现HTML5 Canvas背景动画
在日常的学习中我接触到一些HTML5 Canvas动画,在开发 tiomg.org 太美在线工具网站的时候,想将这些震撼或小清新的动画融合到工具网站中,这样可以使原本单调的网页看起来丰富和更有设计感 ...
ae制h5文字动画_7款超华丽的HTML5 Canvas文字动画特效
本文作者html5tricks,转载请注明出处文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这时候我们就 ...
html5图片浮层,Div层悬浮实现HTML5 Canvas背景动画
在日常的学习中我接触到一些HTML5 Canvas动画,在开发 tiomg.org 太美在线工具网站的时候,想将这些震撼或小清新的动画融合到工具网站中,这样可以使原本单调的网页看起来丰富和更有设计感 ...
HTML5 canvas大风车动画转啊转
一个纯正的HTML5页面效果,用IE浏览器图标模拟的大风车转啊转效果,不要以为IE图标是图片!!难度在于,里面的所有东西都不是图片,而是用canvas写的,你佩服我没有用,你应该佩服HTML5的can ...

html5 canvas气泡动画

html5 canvas气泡动画相关推荐

最新文章

热门文章