h5 canvas 小球移动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <script type="text/javascript">

        $().ready(function () {

            var d=$("#cans").get(0).getContext("2d");

            var dir=0;

            var width=500;

            var height=200;

            var exp=1;  //像素移动的位置，正数向下，负数向上

            function test(){

//                $("#res").get(0).innerText+=123;

                d.clearRect(0,0,width,height)//清除原始图形

//                画圆

                d.fillStyle="red";

                d.beginPath(); // 从新开始画，防止 冲突重叠

                d.arc(50,dir,20,0,Math.PI*2,true); // x y 坐标 半径130

//                d.arc(50,dir,dir,0,Math.PI*2,true); //  半径为dir 也慢慢变大

                d.closePath(); // 结束画布，防止冲突重叠

                d.fill(); // 结束渲染

                dir+=exp;

//                上下移动

                if(dir==0 || dir==height){

                    exp*=-1;

                }

            }

            var tt;

            $("#bt1").bind('click', function () {

                 tt=setInterval(test,20);

            });

            $("#bt2").bind('click', function () {

                clearInterval(tt);

            })

        });

    </script>

</head>

<body>

<canvas id="cans" width="500" height="200">浏览器不支持canvas</canvas>

<div id="res"></div>

<button id="bt1">开始</button>

<button id="bt2">停止</button>

</body>

</html>

h5 canvas 小球移动的更多相关文章

  1. H5 canvas绘制出现模糊的问题

    在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...

  2. h5 canvas 画图

    h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  3. js+canvas(H5)实现小球移动小demo

    *canvas提供画布,大小自定义,js得到画布,从画布对象通过getContext('2d')来得到画笔,然后就可以开始画了 代码: <!DOCTYPE html> <html l ...

  4. H5 canvas 小demo之小球的随机运动

    1:结构之html----balls.html <!DOCTYPE html> <html> <head lang="en"> <meta ...

  5. canvas小球动画原理

    随着html5发展,canvas标签作为h5革命性的发展标志也越来越流行.canvas标签的强大之处,不仅在于它可以作为一个独立的画布,也可以利用canvas做一些动画而不用导入flash文件.同时, ...

  6. canvas小球

      小球碰撞效果是采用面向对象的方式写的,在小球的构造器里包含了小球的属性值,大小,移动速度,半径大小以及颜色. 在小球的原型方法里,添加了小球运动的方法,当小球碰撞到屏幕边界的时候进行反弹. 小球是 ...

  7. H5 canvas填充文字自动换行

    canvas是H5中非常重要,非常常用,也是非常强大的一个新标签,美中不足的事,canvas中没没有自动换行的属性,我的第一反应是,字符串截取,然后计算每行的距离来实现自动换行.. 然后百度了一下,已 ...

  8. h5 canvas

    概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap). 使用前,首先需要新建一个canvas网页元素. & ...

  9. H5 canvas圆形的时钟

    今天用H5中的canvas标签做一个时钟,H5中有很多好用的新增标签,真的很不错. 1.canvas标签介绍 <canvas> 标签定义图形,比如图表和其他图像,你必须使用脚本来绘制图形. ...

随机推荐

  1. Initialization of deep networks

    Initialization of deep networks 24 Feb 2015Gustav Larsson As we all know, the solution to a non-conv ...

  2. nginx 服务器重启命令，关闭 (转)

    nginx -s reload  :修改配置后重新加载生效nginx -s reopen  :重新打开日志文件nginx -t -c /path/to/nginx.conf 测试nginx配置文件是否 ...

  3. Oracle 11g r2 x64 中文乱码解决方案

    1.检查服务器编码: 执行SQL语法: select * from v$nls_parameters; 2.设置本地客户端编码: 进入 我的电脑,属性,高级,环境变量,添加2项:LANG=zh_CN. ...

  4. LinkedList和ArrayList的区别/何时使用LinkedList和ArrayList

    1.ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构. 2.对于随机访问get和set,ArrayList觉得优于LinkedList,因为LinkedList ...

  5. android-android各大手机系统打开权限管理页面

    android系统五花八门,当我们去请求用户的权限的时候,总是会弹出是否允许的对话框. 而且用户一旦不小心点了拒绝,下次就不再询问了,而很多小白用户也不知道怎么去设置.这就导致了很不好的用户体验. 经 ...

  6. ajax原理，验证码生成原理

    什么是ajax AJAX:”Asynchronous JavaScript and XML” 中文意思:异步JavaScript和XML 指一种创建交互式网页应用的网页开发技术.   不是指一种单一的 ...

  7. Spring+Quartz实现定时任务的配置方法

    1.Scheduler的配置 <bean class="org.springframework.scheduling.quartz.SchedulerFactoryBean" ...

  8. 改变edittext边框颜色

    转载自:点击打开链接 第一步:为了更好的比较,准备两个一模一样的EditText(当Activity启动时,焦点会在第一个EditText上,如果你不希望这样只需要写一个高度和宽带为0的EditTex ...

  9. Nginx安装与配置文件解析

    导读 Nginx是一款开放源代码的高性能HTTP服务器和反向代理服务器,同时支持IMAP/POP3代理服务,是一款自由的软件,同时也是运维工程师必会的一种服务器,下面我就简单的说一下Nginx服务器的 ...

  10. Unity3D模型的细致纹理问题解决办法

    http://hunterwang.diandian.com/post/2012-09-28/40039798509 也许有人也遇到过同样的问题,也许解决方式不同,我来介绍一下偶尔尝试发现的解决办法. ...