html5 方框内的小球
html5 方框内的小球
版本一
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
<script>
$(function () {
var x=10,y=10,WIDTH,HEIGHT,RADIUS=10;
canvas=$("#canvas").get(0);
d=canvas.getContext("2d");
//小球方向,默认为1,向右下
var direction=1;
WIDTH= canvas.width;
HEIGHT= canvas.height; //小球走
setInterval(function () {
//1.判断方向,决定小球的横纵坐标
//2.判断方向变化
if(direction==1){
// 右下
x++;
y++;
if(y>=HEIGHT-RADIUS){
direction=2;
}
if(x>=WIDTH-RADIUS){
direction=4;
}
}else if(direction==2){
//右上
x++;
y--;
if(x>=WIDTH-RADIUS){
direction=3;
}
if(y<=RADIUS){
direction=1;
}
}else if(direction==3){
// 左上
x--;
y--;
if(y<=RADIUS){
direction=4;
}
if(x<=RADIUS){
direction=2;
}
}else if(direction==4){
// 左下
x--;
y++;
if(x<=RADIUS){
direction=1;
}
if(y>=HEIGHT-RADIUS){
direction=3;
}
}
d.clearRect(0,0,WIDTH,HEIGHT); // 清除之前的canvas
d.fillStyle="blue";
d.beginPath(); // 从新开始画,防止 冲突重叠
d.arc(x,y,RADIUS,0,Math.PI*2,true); // x y 坐标 半径30
d.closePath(); // 结束画布,防止冲突重叠
d.fill(); // 结束渲染
},20); });
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300" style="border:1px solid green"></canvas>
<span><img src="direction.png" width="400"></span>
</body>
</html>
版本二
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
<script>
$(function () {
var x=10,y=10; // 圆坐标
var WIDTH,HEIGHT,RADIUS=10;
xx=1;yy=1; // 步长
canvas=$("#canvas").get(0);
d=canvas.getContext("2d");
WIDTH= canvas.width;
HEIGHT= canvas.height;
//小球走
setInterval(function () {
if(x < RADIUS || x >= WIDTH-RADIUS){ // 一开始坐标就相等了,要去掉=号 x = radius
xx *= -1;
}
//判断小球纵向边界
if(y < RADIUS || y >= HEIGHT-RADIUS){
yy *= -1;
}
x += xx;
y += yy;
d.clearRect(0,0,WIDTH,HEIGHT); // 清除之前的canvas
d.fillStyle="blue";
d.beginPath(); // 从新开始画,防止 冲突重叠
d.arc(x,y,RADIUS,0,Math.PI*2,true); // x y 坐标 半径30
d.closePath(); // 结束画布,防止冲突重叠
d.fill(); // 结束渲染
},20); });
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300" style="border:1px solid green"></canvas>
<span><img src="direction.png" width="400"></span>
</body>
</html>
html5 方框内的小球的更多相关文章
- HTML5 Canvas绚丽的小球详解
实例说明: 实例使用HTML5+CSS+JavaScript实现小球的运动效果 掌握Canvas的基本用法 技术要点: 从需求出发 分析Demo要实现的功能 擅于使用HTML5 Canvas 参考手册 ...
- HTML5 随机弹跳的小球
查看效果:http://keleyi.com/a/bjad/tc1y11dy.htm Chrome效果图: 火狐效果图:推荐:http://hovertree.com/texiao/css3/18/ ...
- 浅谈html5网页内嵌视频
更好的阅读体验:浅谈html5网页内嵌视频 如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战... ...
- html5 frameset5内嵌框架集
利用html5 frameset内嵌框架简单做一个网页,网页的布局大体如下: 我们可以将其分为四个部分: 第一部分:top图片栏 第二部分:left链接栏 第三部分:right内容栏 第四部分:网页整 ...
- 第八讲:HTML5中canvas实现小球击打小方块游戏
源码:http://download.csdn.net/detail/liumingm900913/7469969 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样能够控制画布居中的位置 ...
- 如何在小方框上打对号 小方框内打对勾 word 方框打对勾
在word中做选择时,很多人遇到需要在小方框上打对勾而不知如何做,现将可行的各种方法总结如下: 1:直接找到一个做好的,保存为图片,在需要的时候插入它: 2:插入文本框,然后边框选择为实线,在文本 ...
- 怎样在小方框上打对号 小方框内打对勾 word 方框打对勾
在word中做选择时,非常多人遇到须要在小方框上打对勾而不知怎样做,现将可行的各种方法总结例如以下: 1:直接找到一个做好的,保存为图片,在须要的时候插入它: 2:插入文本框,然后边框选择为实线,在文 ...
- Html5页面内使用JSON动画的实现
有一天我们的UI设计师找到我说,要把页面中我自己用程序写的动画,换成他们给的json动画,原因是有的动画很复杂,自己写起来达不到他们的预期效果(写到这里我突然想到一个问题,这么复杂的动画为什么不使用g ...
- 如何在 EXCEL 2003 插入的方框内打对勾,复选框
一个方框里带勾的符号是吧第一种:EXCEL里有个插入符号的功能知道吧,打开它在符号那栏(不是特殊符号那栏),下拉字体找到Wingdings字体,在下面的符号中就能找到框中带勾的符号 第二种:在界面点& ...
随机推荐
- 工作之余,花2个月时间系统学习前端和PHP
http://www.jikexueyuan.com/path/web/ http://www.jikexueyuan.com/path/php/
- 7 天玩转 ASP.NET MVC — 第 3 天
目录 第 1 天 第 2 天 第 3 天 第 4 天 第 5 天 第 6 天 第 7 天 0. 前言 我们假定你在开始学习时已经阅读了前两天的学习内容.在第 2 天我们完成了关于显示 Employee ...
- 开始学习C++
这里突然想起来当初学习java和C# 总是会有个demo : hello world. 这里我记得我曾经看过一个笑话.说有个程序员,想学习书法,买了笔墨,都准备好了,但是不知道写什么好.最后,他大 ...
- cf515d
题意:给出一个矩阵迷宫,要求用1×2的积木填满空白区域,问解法是否唯一,如果无解或者多解均输出“Not unique". 分析:广搜.看似二分图匹配但实际上不是. 我们认为每个点和上下左右四 ...
- 由于Windows和Linux行尾标识引起脚本无法运行的解决
在所有的操作系统中,文本文件的结束或者换行都是有行尾符来标识的,C语言中经常使用\n作为换行,\r作为跳格TAB:实际上在计算机还没有真正出现之前,有种电传打字机的设备,每秒钟可以打印10个字符,但是 ...
- jQuery修改页面元素的属性
作为一个后台开发者,在web开发的时候会常常遇到修改前台页面的属性的问题.这两天我发现jQuery的$("#id").attr("prop","值&q ...
- java基础学习05(面向对象基础02)
面向对象基础02 实现的目标 1.String类的使用2.掌握this关键字的使用3.掌握static关键字的使用4.了解内部类 String类 实例化String对象一个字符串就是一个String类 ...
- Effective C++ -----条款33:避免遮掩继承而来的名称
derived classes内的名称会遮掩base classes内的名称.在public继承下从来没有人希望如此. 为了让被遮掩的名称再见天日,可使用using声明式或转交函数(forwardin ...
- oc弹出框显示提示消息
- (void)ShowHUDTitle:(NSString *)title andDelay:(NSTimeInterval)delayTime { if (HUD) { [HUD removeFr ...
- IOS 去掉导航栏(UINavigationBar)下方的横线
这是导航栏的问题,将下边的代码放在 viewWillAppear 方法中就可以实现效果: - (void)viewWillAppear:(BOOL)animated{ // Called when ...