*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. Android JNI技术介绍【转】

    本文转载自:http://blog.csdn.net/yangwen123/article/details/8085833 JNI是JavaNative Interface 的缩写,通过JNI,Jav ...

  2. bzoj5259: [Cerc2017]区间

    还是很强的一个题 ORZ肉丝哥哥 对于两个相交区间,假如他们两个都是可行的,那么他们的交也可行,不然没可能两边都把它缺的补上 那么对于答案区间,向右找到第一个可行区间右端点覆盖询问区间,就是最优的 考 ...

  3. CSU - 1551 Longest Increasing Subsequence Again —— 线段树/树状数组 + 前缀和&后缀和

    题目链接:http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1551 题意: 给出一段序列, 删除其中一段连续的子序列(或者不删), 使得剩下的序列 ...

  4. 【转载】rageagainstthecage.c源码以及注释

    如下: //头文件包含 #include <stdio.h> #include <sys/types.h> #include <sys/time.h> #inclu ...

  5. 记一次关于return的错误

     有时候瞎JB程序,调一天东改西改,都发现不了错:到最后弄出来发现就是那样一个SB错误,真不知道该笑还是该哭. 这个if语句中的return,如果加了那么判断了if语句成立后,下面就不再执行了.   ...

  6. leetcode 395 至少有K个重复字符的最长子串

    找到给定字符串(由小写字符组成)中的最长子串 T , 要求 T 中的每一字符出现次数都不少于 k .输出 T 的长度. 示例 1: 输入: s = "aaabb", k = 3 输 ...

  7. 什么是weex

    Weex是一个使用web开发体验来开发高性能原生应用的框架 在集成WeexSDK之后,你可以使用javaScript和现代流行的前端框架来开发移动应用. Weex的结构是解耦的,渲染引擎与语法层是分开 ...

  8. git远程提交到github或者gitee

    一.git安装 git官网下载 https://git-scm.com/downloads ,既有Windows的.Linux的以及Macos的. windowds下载安装git的可执行文件,就会有两 ...

  9. HDU-2553

    N皇后问题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  10. apk重签名的两种方法

    因为robotium要求被测应用和测试代码要有一致的签名, 所以需要将apk包重签名. 方法一:通过re-sign.jar来产生debug key的apk(不适用于jdk 7以上) re-sign.j ...