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. java 打包jar文件以在没有安装JDK或JRE的机子上运行

    前言: java号称“一次编译,到处运行”,但这有个前提,那就是你的机子上得安装java环境.对于开发人员或其他一些比较懂计算机的人来说这没什么,但是对于一些不懂计算机的人来说这会很麻烦,他们更希望的 ...

  2. JavaScrip操作Cookie

    //生成cookie function addCookie(sName, sValue, day) { var expireDate = new Date(); expireDate.setDate( ...

  3. fp = fopen(s, "at") 中at 是啥意思，a 是append 追加的意思

    打开一个s的stream, a表示append,就是说写入处理的时候是接着原来文件已有内容写入,不是从头写入覆盖掉, t表示打开文件的类型是文本文件, "+号表示对文件既可以读也可以写.&q ...

  4. win7电脑安装wamp出现httpd.exe无法找到组件MSVCR100.dll的解决办法

    昨天重新安装了系统,今天想装一个wamp,在安装过程中报httpd.exe无法找到组件 如图u 运行wamp,发现图标是黄色的,apache没有选中,测试80端口也未被占用. 重新卸载了,又安装了一遍 ...

  5. 微信5.4你所不知道的事 X5浏览引擎提速50%-80%

    微信5.4新增包括搜索公众号.识别图中二维码.面对面收钱等功能,但是你可知道新版微信X5浏览引擎提速了,提升50%-80%的网络传输速度及相同比例流量节省? 从X5浏览引擎开发人员得知,X5浏览技术基 ...

  6. Unity中下载和本地保存实例

    原地址:http://www.linuxidc.com/Linux/2011-10/45888.htm Download.cs using UnityEngine; using System.Coll ...

  7. dpkg：警告：无法找到软件包 XXXX 问题解决

    原地址:http://blog.csdn.net/wise622453/article/details/7905253 纠结了好久在ubuntu server 上 出现的 一大批“ dpkg:警告:无 ...

  8. Python 正则表达式_re模块_使用compile加速

    使用compile加速 compile( rule [,flag] ) 将正则规则编译成一个Pattern对象,以供接下来使用. 第一个参数是规则式,第二个参数是规则选项. 返回一个Pattern对象 ...

  9. django-cms 代码研究（一）djangocms是什么

    首先用djangocms生成了一个站点(具体参考这里:http://www.cnblogs.com/Tommy-Yu/p/3878488.html),其文件结构如下: 本来以为会很有逼格,结果一看傻眼 ...

  10. 静态资源[org.springframework.web.servlet.PageNotFound]

    springmvc 无法访问js.css.jpg等资源文件,tomcat启动报警告如下 [org.springframework.web.servlet.PageNotFound] - No mapp ...