*canvas提供画布，大小自定义，js得到画布，从画布对象通过getContext('2d')来得到画笔，然后就可以开始画了

代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>MoveDemo</title>

    <script type="text/javascript">

             //注意，此句必须放在方法外边作为全局变量，如果放在方法内部，就会犯下和我一样的错误，导致小球始终无法移动，找了好久都没找到问题。

             var dir=0;
             //词句也需要放到外边，否则会出现方向无法改变的窘况。
　　　　　　   var exp = 3;

            function test(){

                //该句需要放到方法里边，因为要实时刷新得到画布

                var d=document.getElementById("cans").getContext("2d");;

                var width=500;

                var height=300;

                //实时刷新当前时间，由于是测试，没有调整格式

                document.getElementById("res").innerHTML=new Date();

               //清空画布方法clearRect()

                d.clearRect(0,0,width,height)

                //指定画笔颜色

                d.fillStyle="red";

                //画线条，图形等之前的通用方法，告诉浏览器要开始了。

                d.beginPath();

                //画圆弧，指定了2pi代表画圆

                d.arc(50,dir,30,0,Math.PI*2,true);

                //闭合路径

                d.closePath();

                //刷新画布

                d.fill();

                //朝着y正方向移动

                dir += exp;

                //碰到边界改变方向

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

                      exp=-exp;

            }

            var tt;

            function b(){

            //setinterval(func,mills)方法提供了y移动的主要支持

            tt=setInterval("test()",100);

             }

            function c(){

            //清空setinterval()指定的时时刷新

            clearInterval(tt);

             }

    </script>

</head>

<body >

<canvas id="cans" width="500px" height="300px" style="border:1px solid red;">浏览器不支持canvas</canvas>

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

<button id="bt1" onclick="b()">begin</button>

<button id="bt2" onclick="c()">stop</button></button>

</body>

</html>

　　

js+canvas(H5)实现小球移动小demo的更多相关文章

  1. H5 PWA技术以及小demo

    H5 PWA技术 1.原生app优缺点 a.体验好.下载到手机上入口方便 b.开发成本高(ios和安卓) c.软件上线需要审核 d.版本更新需要将新版本上传到不同的应用商店 e.使用前需下载 2.we ...

  2. Flexible实现H5移动端适配小demo

    前言 看了宇哥关于移动端适配的分享后,加上目前公司项目也需要做移动端适配,今天就抽空搞了搞.目前业界还是比较推崇手淘使用"rem+viewport"的解决方案,今天自己模仿手淘fl ...

  3. 有关JS控制时间的几个小Demo

    一.Document自带的定时和延时方法:  循环运行:var timeid = window.setInterval("方法名或方法"."延时");windo ...

  4. js+canvas 一只一担小游戏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  6. Canvas+Js制作动量守恒的小球碰撞

    目的:通过js实现小球碰撞并实现动量守恒 canvas我们就不多说了,有用着呢. 我们可以通过canvas画2D图形(圆.方块.三角形等等)3D图形(球体.正方体等待). 当然这只是基础的皮毛而已,c ...

  7. 第八讲：HTML5中canvas实现小球击打小方块游戏

    源码:http://download.csdn.net/detail/liumingm900913/7469969 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样能够控制画布居中的位置 ...

  8. js存款计算器原生小demo

    大家好,本人是初入前端的一枚程序猿,深知js底层开发的重要性,这也是我的软肋所在(曾经以为),渐渐的明白了一个道理,饭要一口口吃,路要一步步走,这也是我想告诉给所有刚刚进入IT行业的技术员们,沉下心, ...

  9. Vue.js之组件嵌套小demo

    Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...

随机推荐

  1. Shell中括号的作用

    Shell中括号的作用 作者:Danbo 时间:2015-8-7 单小括号() ①.命令组.括号中的命令将会断开一个子Shell顺序执行,所以括号中的变量不能被脚本余下的部分使用.括号中多个命令之间用 ...

  2. 动态负载均衡（Nginx+Consul+UpSync）环境搭建

    首先 安装好 Consul upsync 然后: 1.配置安装Nginx 需要做配置,包括分组之类的,创建目录,有些插件是需要存放在这些目录的 groupadd nginx useradd -g ng ...

  3. avf_showspectrum.c:112: undefined reference to `av_rdft_end

    下面还有一堆错,是由于ffmpeg库没编好,重新编好即可

  4. html5--select与HTML5新增的datalist元素

    html5--select与HTML5新增的datalist元素 学习要点 掌握select元素与datalist元素的使用 select元素 用来建立一个下拉菜单选项列表 不仅可以在表单中使用,还可 ...

  5. 我在面试.NET/C#程序员时会提出的问题

    我在面试.NET/C#程序员时会提出的问题 2011-03-03 15:38 by 老赵, 28107 visits 说起来我也面试过相当数量的.NET(包括C#,后文不重复)程序员了,有的通过电话, ...

  6. org.jetbrains.android.uipreview.RenderingException: Failed to load the LayoutLib: com/android/layoutlib/bridge/Bridge : Unsupported major.minor version 52.0

    在Android Studio使用的时候,突然发现Preview功能不能用了,报了一个错,错误如下 org.jetbrains.android.uipreview.RenderingException ...

  7. web安全字体

    webfont解剖 Unicode字体可以包含数以千计字形 有四个字体格式: WOFF2, WOFF, EOT, TTF 一些字体格式需要使用GZIP压缩 一个web字体是字形的集合,且每个字形是一个 ...

  8. JavaWeb学习总结（三）response与request

    一.response response是Servlet.service方法的一个参数,类型为javax.servlet.http.HttpServletResponse.在客户端发出每个请求时,服务器 ...

  9. python sorted函数的小练习

    前两天学习了一下socket编程,在向某大神请教问题时被嫌弃了,有一种还没学会走就想跑的感觉.大神说我现在的水平应该去做一些像是操作文件.序列号等的小练习来加深理解.下面是他给我出的小练习: 1.da ...

  10. FFmpeg常用命令 （一）

    常用参数说明: 主要参数:-i 设定输入流-f 设定输出格式-ss 开始时间视频参数:-b 设定视频流量,默认为200Kbit/s-r 设定帧速率,默认为25-s 设定画面的宽与高-aspect 设定 ...