*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. 使用webpack4搭建一个基于Vue的组件库

    组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的.记录如何使用webpack4搭建一个library ...

  2. 关于JavaScript的事件触发

    突然知道JavaScript底层是怎么实现事件触发的,找到一个博客,功力不够,看的很迷糊,记载这里吧,后面再研究. [探讨]javascript事件机制底层实现原理

  3. 网页中的title中设置图标

    每个网页中title旁边的图标是怎么实现的呢?像这个百度的图标,今天做了一下,很简单,下面记录一下. 做一个图片,一般的图标都可以,把图标后缀改为.ico格式就OK了,放在项目路径下,保证该图片可以被 ...

  4. Dubbo与Zookeeper、SpringMVC整合与使用（干货-理论放一遍。。。还未完结！）

    Dubbo跟Zookeeper的简介分享两个不错的链接: Dubbo简介:http://shiyanjun.cn/archives/325.html Zookeeper简介:http://www.op ...

  5. 在eclipse里头用checkstyle检查项目出现 File contains tab characters (this is the first instance)原因

    就是文件里面有制表符,通常是使用tab键缩进造成的. 代码中缩进不推荐使用制表符,建议将制表符替换为4个空格.在菜单中可设置.

  6. BestCoder10 1001 Revenge of Fibonacci(hdu 5018) 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5018 题目意思:给出在 new Fibonacci 中最先的两个数 A 和 B(也就是f[1] = A ...

  7. codeforces C. New Year Ratings Change 解题报告

    题目链接:http://codeforces.com/problemset/problem/379/C 题目意思:有n个users,每个user都有自己想升的rating.要解决的问题是给予每个人不同 ...

  8. Function javascript

    通常而言,一个函数是一个子程序,他们可以被外部代码调用(亦或被滴管函数在内部调用).和程序一样,函数是由一系列声明(被称为函数体function body)组合而成.值可以传递给函数,并且函数可以返回 ...

  9. [转载]Dalvik指令集

    这篇文章是转载的,为了便于查找一些指令,贴在这里. 转自:http://blog.csdn.net/canfengxiliu/article/details/20144119 ------------ ...

  10. luogu 3389 【模板】高斯消元

    大概就是对每一行先找到最大的减小误差,然后代入消元 #include<iostream> #include<cstdio> #include<cstring> #i ...