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 方框内的小球的更多相关文章

  1. HTML5 Canvas绚丽的小球详解

    实例说明: 实例使用HTML5+CSS+JavaScript实现小球的运动效果 掌握Canvas的基本用法 技术要点: 从需求出发 分析Demo要实现的功能 擅于使用HTML5 Canvas 参考手册 ...

  2. HTML5 随机弹跳的小球

    查看效果:http://keleyi.com/a/bjad/tc1y11dy.htm Chrome效果图: 火狐效果图:推荐:http://hovertree.com/texiao/css3/18/ ...

  3. 浅谈html5网页内嵌视频

    更好的阅读体验:浅谈html5网页内嵌视频 如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战... ...

  4. html5 frameset5内嵌框架集

    利用html5 frameset内嵌框架简单做一个网页,网页的布局大体如下: 我们可以将其分为四个部分: 第一部分:top图片栏 第二部分:left链接栏 第三部分:right内容栏 第四部分:网页整 ...

  5. 第八讲：HTML5中canvas实现小球击打小方块游戏

    源码:http://download.csdn.net/detail/liumingm900913/7469969 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样能够控制画布居中的位置 ...

  6. 如何在小方框上打对号 小方框内打对勾 word 方框打对勾

      在word中做选择时,很多人遇到需要在小方框上打对勾而不知如何做,现将可行的各种方法总结如下: 1:直接找到一个做好的,保存为图片,在需要的时候插入它: 2:插入文本框,然后边框选择为实线,在文本 ...

  7. 怎样在小方框上打对号 小方框内打对勾 word 方框打对勾

    在word中做选择时,非常多人遇到须要在小方框上打对勾而不知怎样做,现将可行的各种方法总结例如以下: 1:直接找到一个做好的,保存为图片,在须要的时候插入它: 2:插入文本框,然后边框选择为实线,在文 ...

  8. Html5页面内使用JSON动画的实现

    有一天我们的UI设计师找到我说,要把页面中我自己用程序写的动画,换成他们给的json动画,原因是有的动画很复杂,自己写起来达不到他们的预期效果(写到这里我突然想到一个问题,这么复杂的动画为什么不使用g ...

  9. 如何在 EXCEL 2003 插入的方框内打对勾,复选框

    一个方框里带勾的符号是吧第一种:EXCEL里有个插入符号的功能知道吧,打开它在符号那栏(不是特殊符号那栏),下拉字体找到Wingdings字体,在下面的符号中就能找到框中带勾的符号 第二种:在界面点& ...

随机推荐

  1. PHP模拟登录并获取数据

    cURL 是一个功能强大的PHP库,使用PHP的cURL库可以简单和有效地抓取网页并采集内容,设置cookie完成模拟登录网页,curl提供了丰富的函数,开发者可以从PHP手册中获取更多关于cURL信 ...

  2. Java 中常用缓存Cache机制的实现《二》

    所谓缓存,就是将程序或系统经常要调用的对象存在内存中,一遍其使用时可以快速调用,不必再去创建新的重复的实例.这样做可以减少系统开销,提高系统效率. AD: Cache 所谓缓存,就是将程序或系统经常要 ...

  3. Qt5.4 MSVC mysql驱动编译;

    http://www.mysql.com/ 下载mysql http://download.qt.io/archive/qt/     Qt 下载 1. mysql安装源码 注意勾选这一步,将mysq ...

  4. poj4052

    题意:求一个文章(长度5.1e6)里面出现了多少个指定的模式串.重复出现只记一次.而且如果两个模式串都出现的情况下,一个是另一个的子串,则该子串不算出现过. 分析:AC自动机. 由于子串不算所以加一些 ...

  5. 用C#读取txt文件的方法

    1.使用FileStream读写文件 文件头: using System;using System.Collections.Generic;using System.Text;using System ...

  6. css实现图片闪光效果

    1.这个效果是看到京东商城上的一个下效果,原本的思路是 用js控制一个图片在某张需要闪光的图片上重复出现,但是 网上找了一些资料,竟然是用css写的,真是太帅了!!! 2.原理:在需要闪光的图片前添加 ...

  7. 让复杂Json数据和对象自由转换 --- Gson

    Gson是谷歌用于对Json操作的库,里面有着强大而又方便的功能,最常用的就是 fromJson():将json数据转化为对象: toJson():将对象转化为json数据! 对于普通的json数据使 ...

  8. Volley与XUtils网络请求使用对比，心得，两者基本使用

    之前一直使用的Volley作为网络请求框架,它是Google 在2013年的I/O大会 上,发布的.Volley是Android平台上的网络通信库,能使网络通信更快,更简单,更健壮,同时扩展性很强.在 ...

  9. cocos2d-x 第一篇 环境搭建

    官网:http://www.cocos2d-x.org/ 下载一个稳定版的cocos2d-x (网址:http://download.cocos2d-x.org/ Github Repository ...

  10. yii 多模板

    main.php: //替换所有模板 //加载文件名为first的模板 //       'theme'=>'theme1', 'components'=>array(           ...