这篇博客展示了如何使用HTML5的canvas元素和JavaScript创建一个气泡动画效果。当在画布上点击时，会生成新的气泡，并在碰到边界时反弹。作者提到了气泡碰撞的处理尚未完善。
写了一个简单的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>
最低0.47元/天 解锁文章
扫一扫
7287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
