html5 canvas气泡动画

最新推荐文章于 2024-07-26 19:04:42 发布

ccessl

最新推荐文章于 2024-07-26 19:04:42 发布

阅读量1.8k

点赞数

分类专栏： JavaScript 文章标签： html5 canvas javascript

本文链接：https://blog.csdn.net/cc_fys/article/details/77725696

版权

这篇博客展示了如何使用HTML5的canvas元素和JavaScript创建一个气泡动画效果。当在画布上点击时，会生成新的气泡，并在碰到边界时反弹。作者提到了气泡碰撞的处理尚未完善。

摘要由CSDN通过智能技术生成

写了一个简单的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 blac

最低0.47元/天解锁文章

ccessl

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
html5 canvas气泡动画

html5 canvas气泡动画，自己写了一个简单的demo，用canvas实现一个气泡的动画，点击画布的时候增加气泡。当气泡碰撞到画布边缘的时候会反弹回来，能同时改变颜色，与用户交互。画布的宽度为w,高度为y,球的半径为为r每个新生成的气泡有2个随机值，一个表示x轴方向的移动比例movex，一个表示y轴方向的移动比例movey。当气泡移动到左上角、左下角、右下角、右上角的时候movex,movey反向当气泡移动到左边缘和右边缘的时候，movex反向当气泡移动到上边缘和下边缘的时候，movey反向
复制链接

扫一扫

专栏目录