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. mlecms v2.2版权

    inc\tools\smarty 下的Smarty.class.php文件. 找到 187行左右 我们会发现原来的  $dopud =$_template->libfile($dopud);已经 ...

  2. Socket 学习入门

    http://www.codeproject.com/Articles/13071/Programming-Windows-TCP-Sockets-in-C-for-the-Begin

  3. ls -alrth 及ls 详解

    idcdpi  抓包过程中 用了命令  ls   - alrth :命令,所以回头重新学习 ls命令 linux ls和 ll 命令 标签: linuxsocketssolarisbash出版扩展 2 ...

  4. ubuntu.sh: 113: ubuntu.sh: Syntax error: "(" unexpected

    在ubuntu电脑上安装lnmp环境,执行下面命令时 sudo sh ubuntu.sh 报错误:ubuntu.sh: 113: ubuntu.sh: Syntax error: "(&qu ...

  5. Session超时处理

    1.web.xml 添加配置: <!-- session超时 --> <filter> <filter-name>sessionFilter</filter- ...

  6. 一个PHP写的简单webservice服务端+客户端

    首先是服务端,服务端有一个主要的class组成:apiServer.php <?php /** * apiServer.php * * webservice主类 * * @filename ap ...

  7. 在Linux用户空间做内核空间做的事情

    导读 我相信,Linux 最好也是最坏的事情,就是内核空间(kernel space)和用户空间(user space)之间的巨大差别.如果没有这个区别,Linux 可能也不会成为世界上影响力最大的操 ...

  8. [POJ1003]Hangover

    [POJ1003]Hangover 试题描述 How far can you make a stack of cards overhang a table? If you have one card, ...

  9. ZeroMQ之Request/Response (Java)

    自己最开始是在cloud foundry中接触过消息服务器(nats),或者说是消息中间件,也算是初步知道了一个消息服务器对于分布式的网络系统的重要性,后来自己也曾想过在一些项目中使用它,尤其是在一些 ...

  10. myeclipse2014集成SVN

    团队合作的项目肯定少不了版本控制,那么现在就看看myeclispe中是如何使用的吧. 开发环境:myeclipse 2014   java 8 tomcate 8 试了网上说的几种方法,都没有成功,最 ...