canvas画布实现一个动态效果小demo（滚动圆）

最新推荐文章于 2024-05-05 07:51:48 发布

五花肉三七分

最新推荐文章于 2024-05-05 07:51:48 发布

阅读量1.4k

点赞数

分类专栏： html5 文章标签： html

本文链接：https://blog.csdn.net/m0_50789201/article/details/124362303

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果展示：

一：分析问题：

首先静态结构是盒子，盒子里面有一个圆。
这个圆是在盒子内移动。
移动的过程体现随机性。
当圆碰到盒子边框时会有反弹效果。

二：解题思路：

明确使用的api是canvas画布。动态效果使用了定时器。
首先绘制出静态结构。
计算出圆移动时圆心的坐标。
计算出圆碰到盒子边框反弹效果的条件。
使用定时器动态实现效果。

三：代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态</title>
</head>

<body>
    <canvas id="myCanvas" width="500px" height="500px" style="border: 1px solid black;"></canvas>
    <script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");

        function rand(mun) {
            return Math.floor(Math.random() * mun + 1)
        }
        var arcX = 40;
        var arcY = 40;
        var arcR = 40;
        var radX = rand(10);
        var radY = rand(10);
        setInterval(function () {
            ctx.clearRect(0, 0, 500, 500);
            arcX += radX;
            arcY += radY;
            if (arcX > c.width - arcR) {
                radX = -radX;
            }
            if (arcX < arcR) {
                radX = Math.abs(radX);
            }
            if (arcY > c.width - arcR) {
                radY = -radY;
            }
            if (arcY < arcR) {
                radY = Math.abs(radY);
            }
            ctx.beginPath();
            ctx.fillStyle = "blue";
            ctx.arc(arcX, arcY, 40, 0, 2 * Math.PI);
            ctx.fill();
        }, 20)
    </script>
</body>

</html>

四：炫酷案例分享：

五花肉三七分

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
canvas画布实现一个动态效果小demo（滚动圆）

效果展示：一：分析问题：首先静态结构是盒子，盒子里面有一个圆。这个圆是在盒子内移动。移动的过程体现随机性。当圆碰到盒子边框时会有反弹效果。二：解题思路：明确使用的api是canvas画布。动态效果使用了定时器。首先绘制出静态结构。计算出圆移动时圆心的坐标。计算出圆碰到盒子边框反弹效果的条件。使用定时器动态实现效果。三：代码实现：<!DOCTYPE html><html lang="en"><head> &
复制链接

扫一扫