作者：html5Game | 时间：2014-2-25 17:05:14 | [小 大] | 来源：HTML5 |
阅读：11663 |
：
0 | 收藏
HTML5，入门，Canvas，画板，实现，球，简单，盒子，随机，移动
[
摘要]：
HTML5提供了一个非常好的标签那就是Canvas！
Canvas元素用于在网页上绘制图形，Canvas画布是一个矩形区域，你可以控制其每一个像素。它拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
今天我们就来讲讲如何通过Javascript在Canvas画布上实现一个球在固定盒子内随机移动的示例：
1、创建Canvas画板
HTML5内声明一个Canvas画板很简单，只需要这样在HTML页面内加入一个canvas标签即可，需要定义其大小和id
<canvas>
对不起，你的浏览器不支持Canvas标签！
</canvas>
2、实现方...
HTML5提供了一个非常好的标签那就是Canvas！
Canvas元素用于在网页上绘制图形，Canvas画布是一个矩形区域，你可以控制其每一个像素。它拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
今天我们就来讲讲如何通过Javascript在Canvas画布上实现一个球在固定盒子内随机移动的示例：
1、创建Canvas画板
HTML5内声明一个Canvas画板很简单，只需要这样在HTML页面内加入一个canvas标签即可，需要定义其大小和id
<canvas>
对不起，你的浏览器不支持Canvas标签！
</canvas>
2、实现方案整理
要实现这样一个球在固定盒子内随机移动我们需要做到以下几点：
1）、画板大小固定；
2）、球大小固定且圆心位置随机；
3）、需要考虑球不出边界；
4）、通过setInterval(function(){},speed)方法实现时间间隔通过清空面板和重画模拟球的移动。
3、通过JavaScript操作画板
1）、初始化变量
//x和y为球的圆心坐标
//speed:表示球移动的速度 单位为毫秒
//radius:为球的半径
//width和height为盒子大小
var w, x,y, speed = 500, radius = 50, width = 400, height = 400;
2）、页面初始化绘制画板且设定时间间隔
//初始化
function init() {
drawCanvas();
setInterval(moveWheel, speed);
}
//画盒子
function drawCanvas() {
//创建Canvas对象
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//在画布面板上面创建一个矩形
ctx.fillStyle = "#000000"; //设置填充颜色值
ctx.fillRect(0, 0, width, height);
ctx.fill();
w = ctx;
}
3）、随机移动球的实现
//随机移动球
function moveWheel() {
clearCanvas();
drawCanvas();
//获得随机坐标
x = getRandomNum();
y = getRandomNum();
//在画布上渲染一个圆形
w.fillStyle = '#FFFFFF';
w.beginPath();
w.arc(x, y, radius, 0, Math.PI * 2, true);
w.closePath();
w.fill();
}
4）、获取随机坐标数据
//获取随机数
function getRandomNum() {
return Math.random() * (width - radius * 2) + radius;
}
5）、清除画布
//清除画布
function clearCanvas() {
if (typeof w != "undefined") {
w.clearRect(0, 0, width, height);
}
}
完整示例代码如下所示：
<!doctype html>
<html>
<head>
<title>HTML5标签Canvas画布练习轮子滚动</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Canvas 标签实现一个球限定在盒子内随机移动效果</h1>
<canvas>
对不起，你的浏览器不支持Canvas标签！
</canvas>
<script type="text/javascript" language="javascript">
//x和y为球的圆心坐标
//speed:表示球移动的速度 单位为毫秒
//radius:为球的半径
//width和height为盒子大小
var w, x,y, speed = 500, radius = 50, width = 400, height = 400;
//初始化
function init() {
drawCanvas();
setInterval(moveWheel, speed);
}
//画盒子
function drawCanvas() {
//创建Canvas对象
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//在画布面板上面创建一个矩形
ctx.fillStyle = "#000000"; //设置填充颜色值
ctx.fillRect(0, 0, width, height);
ctx.fill();
w = ctx;
}
//随机移动球
function moveWheel() {
clearCanvas();
drawCanvas();
//获得随机坐标
x = getRandomNum();
y = getRandomNum();
//在画布上渲染一个圆形
w.fillStyle = '#FFFFFF';
w.beginPath();
w.arc(x, y, radius, 0, Math.PI * 2, true);
w.closePath();
w.fill();
}
//清除画布
function clearCanvas() {
if (typeof w != "undefined") {
w.clearRect(0, 0, width, height);
}
}
//获取随机数
function getRandomNum() {
return Math.random() * (width - radius * 2) + radius;
}
</script>
</body>
</html>
相关文章
精彩导读
热门资讯
关注我们
