canvas画布实现一个动态效果小demo（滚动圆）
Posted 五花肉三七分
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas画布实现一个动态效果小demo（滚动圆）相关的知识，希望对你有一定的参考价值。
效果展示：
一：分析问题：
- 首先静态结构是盒子，盒子里面有一个圆。
- 这个圆是在盒子内移动。
- 移动的过程体现随机性。
- 当圆碰到盒子边框时会有反弹效果。
二：解题思路：
- 明确使用的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>四：炫酷案例分享：
- Canvas Cycle: True 8-bit Color Cycling with HTML5 (effectgames.com)
- Trail - an experiment with particle movement patterns using HTML5. (hakim.se)
- Ball Pool (mrdoob.com)
以上是关于canvas画布实现一个动态效果小demo（滚动圆）的主要内容，如果未能解决你的问题，请参考以下文章