html5 canvas气泡动画-函數-匯編語言學習筆記

html5 canvas气泡动画

2023-09-18 阅读 22 评论 0

摘要：写了一个简单的demo，用canvas实现一个气泡的动画，点击画布的时候增加气泡。当气泡碰撞到画布边缘的时候会反弹回来，能同时改变颜色。思路：画布的宽度为w,高度为y,球的半径为为r 每个新生成的气泡有2个随机值，一个表示x轴方向的移动比

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

思路：

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

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

html2canvas下载、当气泡移动到左上角、左下角、右下角、右上角的时候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>

最终效果：

csscanvas如何使用，

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

原文链接：https://hbdhgg.com/3/74474.html

发表评论: