canvas例子一弹跳小球

最新推荐文章于 2022-11-30 17:41:04 发布

chenke__hxx

最新推荐文章于 2022-11-30 17:41:04 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： web前端 JavaScript canvas

本文链接：https://blog.youkuaiyun.com/chenke__hxx/article/details/18079885

这篇博客介绍了如何使用HTML5的canvas元素创建一个简单的弹跳小球动画。作者探讨了canvas的arc函数在绘制小球上的应用，并提到了如何在限定范围内让小球持续弹跳。示例代码包括了小球的绘制和运动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2014年的第一篇博客

最近在看html5的canvas，对于我这么一个不懂得flash开发的孩子来说，当然还是专研canvas了，谁叫flash已经是明日黄花了。这个例子非常简单，就是简单的一个弹性小球在一个框框中不停的弹跳。

主要有两部分构成，一个是弹性小球，一个划定范围的框。

首先先用canvas的arc函数画出一个小球

		ctx.beginPath();
                ctx.arc(ballX, ballY, ballRad, 0, Math.PI * 2, false);
                ctx.fill();

在用strokeRect画出边框

ctx.strokeRect(boxX, boxY, boxWidth, boxHeight);

然后每隔100ms检查小球的位置ballX, ballY是否超出边框，若超出边框，则将对应的运动方向取反

// 判断距离方向函数
            function changDirect () {
                var nextX = ballX + b