如何用canvas画板实现一个简单的球在盒子内反弹运动
1个回答
展开全部
1、创建Canvas画板
HTML5内声明一个Canvas画板很简单，只需要这样在HTML页面内加入一个canvas标签即可，需要定义其大小和id
view sourceprint?
1.<canvas id="myCanvas" width="400" height="400">
2.对不起，你的浏览器不支持Canvas标签！
3.</canvas>
2、实现方案整理
要实现这样一个球在固定盒子内随机移动我们需要做到以下几点：
1）、画板大小固定；
2）、球大小固定且圆心位置随机；
3）、需要考虑球不出边界；
4）、通过setInterval(function(){},speed)方法实现时间间隔通过清空面板和重画模拟球的移动。
3、通过JavaScript操作画板
1）、初始化变量
view sourceprint?
1.//x和y为球的圆心坐标
2.//speed:表示球移动的速度 单位为毫秒
3.//radius:为球的半径
4.//width和height为盒子大小
5.var w, x,y, speed = 500, radius = 50, width = 400, height = 400;
2）、页面初始化绘制画板且设定时间间隔
view sourceprint?
01.//初始化
02.function init() {
03.drawCanvas();
04.setInterval(moveWheel, speed);
05.}
06.
07.//画盒子
08.function drawCanvas() {
09.//创建Canvas对象
10.var c = document.getElementById("myCanvas");
11.var ctx = c.getContext("2d");
12.//在画布面板上面创建一个矩形
13.ctx.fillStyle = "#000000"; //设置填充颜色值
14.ctx.fillRect(0, 0, width, height);
15.ctx.fill();
16.
17.w = ctx;
18.}
3）、随机移动球的实现
view sourceprint?
01.//随机移动球
02.function moveWheel() {
03.clearCanvas();
04.drawCanvas();
05.
06.//获得随机坐标
07.x = getRandomNum();
08.y = getRandomNum();
09.
10.//在画布上渲染一个圆形
11.w.fillStyle = '#FFFFFF';
12.w.beginPath();
13.w.arc(x, y, radius, 0, Math.PI * 2, true);
14.w.closePath();
15.w.fill();
16.}
4）、获取随机坐标数据
view sourceprint?
1.//获取随机数
2.function getRandomNum() {
3.return Math.random() * (width - radius * 2) + radius;
4.}
5）、清除画布
view sourceprint?
1.//清除画布
2.function clearCanvas() {
3.if (typeof w != "undefined") {
4.w.clearRect(0, 0, width, height);
5.}
6.}
完整示例代码如下所示：
view sourceprint?
01.<!doctype html>
02.<html>
03.<head>
04.<title>HTML5标签Canvas画布练习轮子滚动</title>
05.<meta charset="UTF-8" />
06.</head>
07.<body onload="init();">
08.<h1>Canvas 标签实现一个球限定在盒子内随机移动效果</h1>
09.<canvas id="myCanvas" width="400" height="400">
10.对不起，你的浏览器不支持Canvas标签！
11.</canvas>
12.<script type="text/javascript" language="javascript">
13.//x和y为球的圆心坐标
14.//speed:表示球移动的速度 单位为毫秒
15.//radius:为球的半径
16.//width和height为盒子大小
17.var w, x,y, speed = 500, radius = 50, width = 400, height = 400;
18.
19.//初始化
20.function init() {
21.drawCanvas();
22.setInterval(moveWheel, speed);
23.}
24.
25.//画盒子
26.function drawCanvas() {
27.//创建Canvas对象
28.var c = document.getElementById("myCanvas");
29.var ctx = c.getContext("2d");
30.//在画布面板上面创建一个矩形
31.ctx.fillStyle = "#000000"; //设置填充颜色值
32.ctx.fillRect(0, 0, width, height);
33.ctx.fill();
34.
35.w = ctx;
36.}
37.
38.//随机移动球
39.function moveWheel() {
40.clearCanvas();
41.drawCanvas();
42.
43.//获得随机坐标
44.x = getRandomNum();
45.y = getRandomNum();
46.
47.//在画布上渲染一个圆形
48.w.fillStyle = '#FFFFFF';
49.w.beginPath();
50.w.arc(x, y, radius, 0, Math.PI * 2, true);
51.w.closePath();
52.w.fill();
53.}
54.
55.//清除画布
56.function clearCanvas() {
57.if (typeof w != "undefined") {
58.w.clearRect(0, 0, width, height);
59.}
60.}
61.
62.//获取随机数
63.function getRandomNum() {
64.return Math.random() * (width - radius * 2) + radius;
65.}
66.</script>
67.</body>
68.</html>
过多的代码解释这里就不罗嗦了，核心代码段均有注释，实在有什么不明白的地方随时留言。
HTML5内声明一个Canvas画板很简单，只需要这样在HTML页面内加入一个canvas标签即可，需要定义其大小和id
view sourceprint?
1.<canvas id="myCanvas" width="400" height="400">
2.对不起，你的浏览器不支持Canvas标签！
3.</canvas>
2、实现方案整理
要实现这样一个球在固定盒子内随机移动我们需要做到以下几点：
1）、画板大小固定；
2）、球大小固定且圆心位置随机；
3）、需要考虑球不出边界；
4）、通过setInterval(function(){},speed)方法实现时间间隔通过清空面板和重画模拟球的移动。
3、通过JavaScript操作画板
1）、初始化变量
view sourceprint?
1.//x和y为球的圆心坐标
2.//speed:表示球移动的速度 单位为毫秒
3.//radius:为球的半径
4.//width和height为盒子大小
5.var w, x,y, speed = 500, radius = 50, width = 400, height = 400;
2）、页面初始化绘制画板且设定时间间隔
view sourceprint?
01.//初始化
02.function init() {
03.drawCanvas();
04.setInterval(moveWheel, speed);
05.}
06.
07.//画盒子
08.function drawCanvas() {
09.//创建Canvas对象
10.var c = document.getElementById("myCanvas");
11.var ctx = c.getContext("2d");
12.//在画布面板上面创建一个矩形
13.ctx.fillStyle = "#000000"; //设置填充颜色值
14.ctx.fillRect(0, 0, width, height);
15.ctx.fill();
16.
17.w = ctx;
18.}
3）、随机移动球的实现
view sourceprint?
01.//随机移动球
02.function moveWheel() {
03.clearCanvas();
04.drawCanvas();
05.
06.//获得随机坐标
07.x = getRandomNum();
08.y = getRandomNum();
09.
10.//在画布上渲染一个圆形
11.w.fillStyle = '#FFFFFF';
12.w.beginPath();
13.w.arc(x, y, radius, 0, Math.PI * 2, true);
14.w.closePath();
15.w.fill();
16.}
4）、获取随机坐标数据
view sourceprint?
1.//获取随机数
2.function getRandomNum() {
3.return Math.random() * (width - radius * 2) + radius;
4.}
5）、清除画布
view sourceprint?
1.//清除画布
2.function clearCanvas() {
3.if (typeof w != "undefined") {
4.w.clearRect(0, 0, width, height);
5.}
6.}
完整示例代码如下所示：
view sourceprint?
01.<!doctype html>
02.<html>
03.<head>
04.<title>HTML5标签Canvas画布练习轮子滚动</title>
05.<meta charset="UTF-8" />
06.</head>
07.<body onload="init();">
08.<h1>Canvas 标签实现一个球限定在盒子内随机移动效果</h1>
09.<canvas id="myCanvas" width="400" height="400">
10.对不起，你的浏览器不支持Canvas标签！
11.</canvas>
12.<script type="text/javascript" language="javascript">
13.//x和y为球的圆心坐标
14.//speed:表示球移动的速度 单位为毫秒
15.//radius:为球的半径
16.//width和height为盒子大小
17.var w, x,y, speed = 500, radius = 50, width = 400, height = 400;
18.
19.//初始化
20.function init() {
21.drawCanvas();
22.setInterval(moveWheel, speed);
23.}
24.
25.//画盒子
26.function drawCanvas() {
27.//创建Canvas对象
28.var c = document.getElementById("myCanvas");
29.var ctx = c.getContext("2d");
30.//在画布面板上面创建一个矩形
31.ctx.fillStyle = "#000000"; //设置填充颜色值
32.ctx.fillRect(0, 0, width, height);
33.ctx.fill();
34.
35.w = ctx;
36.}
37.
38.//随机移动球
39.function moveWheel() {
40.clearCanvas();
41.drawCanvas();
42.
43.//获得随机坐标
44.x = getRandomNum();
45.y = getRandomNum();
46.
47.//在画布上渲染一个圆形
48.w.fillStyle = '#FFFFFF';
49.w.beginPath();
50.w.arc(x, y, radius, 0, Math.PI * 2, true);
51.w.closePath();
52.w.fill();
53.}
54.
55.//清除画布
56.function clearCanvas() {
57.if (typeof w != "undefined") {
58.w.clearRect(0, 0, width, height);
59.}
60.}
61.
62.//获取随机数
63.function getRandomNum() {
64.return Math.random() * (width - radius * 2) + radius;
65.}
66.</script>
67.</body>
68.</html>
过多的代码解释这里就不罗嗦了，核心代码段均有注释，实在有什么不明白的地方随时留言。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
