h5 canvas 小球移动

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript" src="../js/jquery.min.js"></script>
  7.     <script type="text/javascript">
  8.  
  9.         $().ready(function () {
  10.             var d=$("#cans").get(0).getContext("2d");
  11.             var dir=0;
  12.             var width=500;
  13.             var height=200;
  14.             var exp=1;  //像素移动的位置，正数向下，负数向上
  15.             function test(){
  16. //                $("#res").get(0).innerText+=123;
  17.                 d.clearRect(0,0,width,height)//清除原始图形
  18. //                画圆
  19.                 d.fillStyle="red";
  20.                 d.beginPath(); // 从新开始画，防止 冲突重叠
  21.                 d.arc(50,dir,20,0,Math.PI*2,true); // x y 坐标 半径130
  22. //                d.arc(50,dir,dir,0,Math.PI*2,true); //  半径为dir 也慢慢变大
  23.                 d.closePath(); // 结束画布，防止冲突重叠
  24.                 d.fill(); // 结束渲染
  25.                 dir+=exp;
  26. //                上下移动
  27.                 if(dir==0 || dir==height){
  28.                     exp*=-1;
  29.                 }
  30.             }
  31.             var tt;
  32.             $("#bt1").bind('click', function () {
  33.                  tt=setInterval(test,20);
  34.             });
  35.             $("#bt2").bind('click', function () {
  36.                 clearInterval(tt);
  37.             })
  38.         });
  39.  
  40.     </script>
  41. </head>
  42. <body>
  43. <canvas id="cans" width="500" height="200">浏览器不支持canvas</canvas>
  44. <div id="res"></div>
  45. <button id="bt1">开始</button>
  46. <button id="bt2">停止</button>
  47. </body>
  48. </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. hdu 1049 Climbing Worm

    解题思路: 1. 两种情况,0x1:井深度小于一次跳的高度.0x2:井深度大于一次跳的高度 2.如果 属于 0x1 则一次跳出 3.否则 本次解题中直接枚举跳的次数 一直循环,直到 [每次跳的真实高度 ...

  2. linux wget 命令用法详解(附实例说明)

    Linux wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,尤其对于网络管理员,经常要下载一些软件或从远程服务器恢复备份到本地服务器   Linux wget是一个下 ...

  3. sed 指令

    sed -e 's/:/ /g' 将待处理文本行中:替换为空格, s/A/B/g 是sed中的替换命令, 将A替换为B, 其中,A可以是正则表达式. g表示全部替换. sed 指令 瀏覽數 : 6,5 ...

  4. ASP.NET MVC 随想录——开始使用ASP.NET Identity，初级篇（转）

    ASP.NET MVC 随想录——开始使用ASP.NET Identity,初级篇   阅读目录 ASP.NET Identity 前世今生 建立 ASP.NET Identity 使用ASP.NET ...

  5. mysql更新一个表里的字段等于另一个表某字段的值

    update a left join c on a.id = c.id set a.body = c.c1 where a.id=c.id; update zcat as z left join zc ...

  6. mySQL笔记2

    php主要实现B/S .net IIS java TomCat LAMP: Linux 系统 A阿帕奇服务器 Mysql数据库 Php语言(KE) mysql:c常用代码 create table c ...

  7. [Effective JavaScript 笔记] 第8条：尽量少用全局对象

    初学者容易使用全局变量的原因 创建全局变量毫不费力,不需要任何形式的声明(只要在非函数里用var 你就可以得到一个全局变量) 写得代码简单,不涉及到大的项目或配合(写hello world是不会有什么 ...

  8. GLUT教程 - 安装

    转载:http://www.cnblogs.com/live41/p/3368830.html glut库 - 下载频道 - CSDN.NEThttp://download.csdn.net/down ...

  9. 中位数与第K小元素

    算法实际上是模仿快速排序算法设计出来的,其基本思想也是对输入数组进行递归划分,与快速排序不同的是,它只对划分出来的子数组之一进行递归处理: int randompartition(int a[],in ...

  10. centos rm -rf 恢复删除的文件

    Linux有时候执行了 rm -rf 等操作误删了文件绝对是一件可怕的事情,好在有一些解决的办法可以临时救急.这时我们就要用到一款叫做extundelete的工具了. 目录[-] 依赖 安装 查找要恢 ...