*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. return;测试

    一 没有return;,则会顺序执行到最后 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  2. bzoj4485: [Jsoi2015]圈地

    思维僵化选手在线被虐 其实应该是不难的,题目明显分成两个集合,要求是不同集合的点不能联通 先假设全选了,然后二分图最小割,相邻两个点直接连墙的费用就可以了 #include<cstdio> ...

  3. codeforces 469B Chat Online 解题报告

    题目链接:http://codeforces.com/problemset/problem/469/B 题目意思:给出 Little Z 的上线时间段,分别是[a1, b1], [a2, b2],.. ...

  4. html5--5-7 绘制圆/弧

    html5--5-7 绘制圆/弧 学习要点 掌握arc() 方法创建圆弧/曲线(用于创建圆或部分圆) 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y ...

  5. html5--3.20 新增的keygen元素

    html5--3.20 新增的keygen元素 学习要点 掌握fieldset/legend元素的用法(和figure和figcaption很像,只不过是作用于表单) 了解keygen元素的用法 fi ...

  6. python 文件与文件夹常见操作以及os.walk的用法

    文件操作: In [34]: import os In [35]: os.rename("hello[复件].py","hello111.py")       ...

  7. oracle 左右链接

    数据表的连接有: 1.内连接(自然连接): inner只有两个表相匹配的行才能在结果集中出现 2.外连接: 包括 (1)左外连接(左边的表不加限制) (2)右外连接(右边的表不加限制) (3)全外连接 ...

  8. 「LOJ#10015」「一本通 1.2 练习 2」扩散（并查集

    题目描述 一个点每过一个单位时间就会向 444 个方向扩散一个距离,如图所示:两个点 a .b 连通,记作 e(a,b),当且仅当 a .b的扩散区域有公共部分.连通块的定义是块内的任意两个点 u.v ...

  9. MongoDB安装及多实例启动

    MongoDB安装及多实例启动 MongoDB简介 MongoDB是一款跨平台.面向文档的数据库.可以实现高性能.高可用性,并且能够轻松扩展,是一个基于分布式文件存储的开源数据库系统,在高负载的情况下 ...

  10. moco实例

    一.moco模拟接口响应json moco的下载地址见虫师博客园:https://www.cnblogs.com/fnng/p/7511539.html foo.json文件内容如下 [ { &quo ...