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. html表单验证程序

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. java分布式通信系统（J2EE分布式服务器架构）

    一.序言 近几个月一直从事一个分布式异步通信系统,今天就整理并blog一下. 这是一个全国性的通信平台,对性能,海量数据,容错性以及扩展性有非常高的要求,所以在系统的架构上就不能简单的采用集中式.简单 ...

  3. 如何在WordPress中使用七牛云存储

    序:七牛云存储可以方便的将网站的图片等数据镜像到七牛云存储的空间,直接从云端将数据返回给用户.这样可以大大节省网站的空间,提升网站的访问速度. 真正显示一键实现WordPress博客静态文件CDN加速 ...

  4. C# Window Service详解

    Windows Service这一块并不复杂,但是注意事项太多了,网上资料也很凌乱,偶尔自己写也会丢三落四的.所以本文也就产生了,本文不会写复杂的东西,完全以基础应用的需求来写,所以不会对Window ...

  5. <转载>NPOI Excel 单元格背景颜色对照表

    我转载地址:http://www.holdcode.com/web/details/117 NPOI Excel 单元格颜色对照表,在引用了 NPOI.dll 后可通过 ICellStyle 接口的 ...

  6. POJ 1054 The Troublesome Frog

    The Troublesome Frog Time Limit: 5000MS Memory Limit: 100000K Total Submissions: 9581 Accepted: 2883 ...

  7. POJ 1442 Black Box

    第k大数维护,我推荐Treap..谁用谁知道....                                                           Black Box Time ...

  8. MYSQL例题合集

    一.数学函数 数学函数主要用于处理数字,包括整型.浮点数等. ABS(x) 返回x的绝对值 SELECT ABS(-1) -- 返回1 CEIL(x),CEILING(x) 返回大于或等于x的最小整数 ...

  9. smb

    smb编辑 SMB(Server Message Block)是协议名,它能被用于Wap连接和客户端与服务器之间的信息沟通.

  10. node.js+websocket实现简易聊天室

    (文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) websocket提供了一种全双工客户端服务器的异步通信方法,这种通信方法使用ws或者wss协议,可 ...