HTML5入门之Canvas:如何用Canvas画板实现一个简单的球在盒子内随机移动效果
-
作者:
html5Game | 时间:2014-2-25 17:05:14 | [
小
大] | 来源:HTML5 |
阅读:12457 |
评论: 0 |
收藏
- HTML5入门Canvas画板实现球简单盒子随机移动
- [ 摘要]: HTML5提供了一个非常好的标签那就是Canvas! Canvas元素用于在网页上绘制图形,Canvas画布是一个矩形区域,你可以控制其每一个像素。它拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 今天我们就来讲讲如何通过Javascript在Canvas画布上实现一个球在固定盒子内随机移动的示例: 1、创建Canvas画板 HTML5内声明一个Canvas画板很简单,只需要这样在HTML页面内加入一个canvas标签即可,需要定义其大小和id <canvas id="myCanvas" width="400" height="400"> 对不起,你的浏览器不支持Canvas标签! </canvas> 2、实现方...
-
HTML5提供了一个非常好的标签那就是Canvas!
Canvas元素用于在网页上绘制图形,Canvas画布是一个矩形区域,你可以控制其每一个像素。它拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
今天我们就来讲讲如何通过Javascript在Canvas画布上实现一个球在固定盒子内随机移动的示例:
1、创建Canvas画板
HTML5内声明一个Canvas画板很简单,只需要这样在HTML页面内加入一个canvas标签即可,需要定义其大小和id
1.
<
canvas
id
=
"myCanvas"
width
=
"400"
height
=
"400"
>
2.
对不起,你的浏览器不支持Canvas标签!
3.
</
canvas
>
2、实现方案整理
要实现这样一个球在固定盒子内随机移动我们需要做到以下几点:
1)、画板大小固定;
2)、球大小固定且圆心位置随机;
3)、需要考虑球不出边界;
4)、通过setInterval(function(){},speed)方法实现时间间隔通过清空面板和重画模拟球的移动。
3、通过JavaScript操作画板
1)、初始化变量
1.
//x和y为球的圆心坐标
2.
//speed:表示球移动的速度 单位为毫秒
3.
//radius:为球的半径
4.
//width和height为盒子大小
5.
var
w, x,y, speed = 500, radius = 50, width = 400, height = 400;
2)、页面初始化绘制画板且设定时间间隔
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)、随机移动球的实现
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)、获取随机坐标数据
1.
//获取随机数
2.
function
getRandomNum() {
3.
return
Math.random() * (width - radius * 2) + radius;
4.
}
5)、清除画布
1.
//清除画布
2.
function
clearCanvas() {
3.
if
(
typeof
w !=
"undefined"
) {
4.
w.clearRect(0, 0, width, height);
5.
}
6.
}
完整示例代码如下所示:
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
>