您的位置：首页 > 其它

Canvas画板实现一个简单的球在盒子内随机移动效果

2015-10-26 20:38 881 查看


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

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
>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航