*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. Nodejs通过Thrift操作hbase卡住原因分析及与javascript的垃圾回收机制的关系

    在最近使用Nodejs通过Thrift操作hbase的时候写了个脚本,不断发送http请求,从而取得hbase下所需的数据,但是在run的过程中for循环并没有执行完全,在执行一部分后会卡住,就再也进 ...

  2. PAT 天梯赛 L2-008. 最长对称子串 【字符串】

    题目链接 https://www.patest.cn/contests/gplt/L2-008 思路 有两种思路 第一种 遍历每一个字符 然后对于每一个 字符 同时 往左 和 往右 遍历 只要 此时 ...

  3. redis一些笔记

    base 字典: hget/hset 在redis字典中值只能是字符串,使用渐进式进行rehash.在rehash的过程中,会保留两个hash结构:查询时会同时查询两个结构:逐渐完成hash的迁移. ...

  4. 【 spring配置文件详解】

    转自: http://book.51cto.com/art/201004/193743.htm Spring配置文件是用于指导Spring工厂进行Bean生产.依赖关系注入(装配)及Bean实例分发的 ...

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

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

  6. android布局中使用include及需注意点

    在android布局中,使用include,将另一个xml文件引入,可作为布局的一部分,但在使用include时,需注意以下问题: 一.使用include引入 如现有标题栏布局block_header ...

  7. codeforces B. Trees in a Row 解题报告

    题目链接:http://codeforces.com/problemset/problem/402/B 题目意思:给出n个数和公差k,问如何调整使得ai + 1 - ai = k.(1 ≤ i < ...

  8. the art of seo(chapter three)

    SEO Planning: Customizing Your Strategy ***Developing an SEO Plan Prior to Site Development***Determ ...

  9. 限制远程桌面登录IP的方法

    转自:http://www.cnblogs.com/vaexi/articles/2106623.html 限制远程桌面登录IP的方法 第一种方法: 1.打开Windows自带的防火墙2.开放允许例外 ...

  10. 51Nod - 1304 ：字符串的相似度 （裸的扩展KMP）

    我们定义2个字符串的相似度等于两个串的相同前缀的长度.例如 "abc" 同 "abd" 的相似度为2,"aaa" 同 "aaab& ...