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>
时间: 2024-10-21 14:40:04

html5 方框内的小球的相关文章

HTML5 Canvas绚丽的小球详解

实例说明: 实例使用HTML5+CSS+JavaScript实现小球的运动效果 掌握Canvas的基本用法 技术要点: 从需求出发 分析Demo要实现的功能 擅于使用HTML5 Canvas 参考手册 主要分为两个部分: 静态布局:小球的设计,包括小球的位置.颜色.大小和大小变化情况等,初始化小球的函数,渲染函数,Update函数 动态主体:变量.数组的的定义,小球显示时长定时,鼠标移动触发小球运动的函数 代码部分: canvas标签,提供绘图的画布 js逻辑:静态小球 其中,_init()函数

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

源代码:http://download.csdn.net/detail/liumingm900913/7469969 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样可以控制画布居中的位置,在对div标签加上一些样式,利于观看 <div id="main"> <!--将画布嵌在div块里面,使其可以居中--> <canvas id="liuming_canvas" width="300px" heigh

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

在word中做选择时,非常多人遇到须要在小方框上打对勾而不知怎样做,现将可行的各种方法总结例如以下: 1:直接找到一个做好的,保存为图片,在须要的时候插入它: 2:插入文本框,然后边框选择为实线,在文本框里插入勾号,再将文本框和勾号缩放到自己想要的大小!(比較可惜的是:这个大小是非常难调整的,手动设置高低的话也会非常痛苦,特别是你要让他和某些符号等大小的时候就更难了!) 3:首先插入对号,通过菜单"插入-特殊符号-数学符号",倒数第二行第二个字符就是它,然后选中对号,选择菜单"

HTML5中canvas实现小球击打小方块游戏

源代码:http://download.csdn.net/detail/liumingm... 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样可以控制画布居中的位置,再对div标签加上一些样式比如border和border-radius,这样一来使其看上去像手机,利于观看. <div id="main"> <!--将画布嵌在div块里面,使其可以居中--> <canvas id="liuming_canvas" widt

HTML5 form内button

突然发现奇怪的事 在html5 中bottn 的type不是submit但是单击的时候它自己就提交表单了. 然后在一查就看到 问题解决,加上type=“button”

Mobile的HTML5网页内快速滚动和回弹的效果

style="overflow: auto;-webkit-overflow-scrolling: touch; 这个可以让页面在Native端滚动时模拟原生的弹性滚动效果 下面是微信浏览器禁止页面下拉查看网址(不影响页面内部scroll) var overscroll = function(el) { el.addEventListener('touchstart', function() { var top = el.scrollTop , totalScroll = el.scrollHe

【Excle】在方框内打勾

在excel中,输入?可以用控件,也可以用设置windings 2字体来设置. 如下图所示D列,字体设置成Wingdings 2字体后,输入R显示?,输入S显示?. 下面实现2个功能 从下拉菜单输入 对号显示绿色,错号显示红色 设置数据有效性 选中区域→数据验证→序列 然后在来源除录入: 设置完毕后效果: 再将C2:C5区域的字体设置为Wingdings 2 此时,在下拉菜单中选择R,则显示 自动设置颜色 选中待设置区域→条件格式→新建规则 同样设置错号显示为红色,设置完成后效果图 原文地址:h

HTML5学习笔记3 内联SVG

HTML5支持内联SVG 下面来介绍一下什么是SVG SVG可缩放矢量图形 可缩放矢量是基于可扩展标记语言(标准通用语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 使用xml格式定义图形 在放大或缩小或改变尺寸的情况下其图形质量不会有损失 SVG优势 与其他的图像格式相比(比如jpeg和gif),使用svg优势在于 svg图像可通过文本编辑器来编辑来创建和修改 svg图像可被搜索,索引,脚本化或压缩 svg是可伸缩的 svg图像可在任何的分辨率下被高质量地

HTML5与CSS3权威指南之CSS3学习记录

title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) 官方网站: 华章图书 书中所有代码下载链接: 链接:http://pan.baidu.com/s/1c0oGMn2 密码:f7zt 选择器 属性选择器 [att=val]选择器--选择属性att值为val的元素 [att*=val]选择器--选择属性att值包含val的元素 [att^=val]选择器--选