canvas画布实现一个动态效果小demo(滚动圆)

Posted 五花肉三七分

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas画布实现一个动态效果小demo(滚动圆)相关的知识,希望对你有一定的参考价值。

效果展示:

一:分析问题:

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

二:解题思路:

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

三:代码实现:

<!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>

四:炫酷案例分享:

阅读世界,共赴山海 423全民读书节,邀你共读

以上是关于canvas画布实现一个动态效果小demo(滚动圆)的主要内容,如果未能解决你的问题,请参考以下文章

canvas画布实现一个动态效果小demo(滚动圆)

自定义控件练习:canvas两个demo练习

使用vue学习three.js之加载和使用纹理-使用canvas画布上的绘画作为纹理渲染到方块上,使用动态绘画纹理

canvas动画气球

微信小程序中使用画布canvas实现动态心电图绘制

canvas+js实现动态饼图效果