我们来做一个小球运动的例子：在这个demo中，我们要求连续多次点击小球“开始”按钮，小球运动速度就越来越快。但是还是不完美存在BUG的，经过多次点击“开始”按钮再点击"停止"按钮就停不下来了，这或许是小球移动事件的冲突吧。

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<canvas id="qiu100" width="500" height="470"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("qiu100");
var q = canvas.getContext("2d");
var dir = 100;
var height = 450;
var width = 500;
var exp = 10;//像素移动的位置
function fff()
{
q.clearRect(0,0,height,width);//清除上一次的痕迹
q.fillStyle = "red";
q.beginPath();
q.arc(50, dir, 35, 0, Math.PI * 2, 2);//球的大小
q.closePath();
q.fill();
dir = dir + exp;
if(dir==0||dir==height)
{
exp = exp * -1;
}
}

</script>
<div id="ds"></div>
<button onclick="tt=setInterval(fff,20);">开始</button>
<button onclick="clearInterval(tt);" >停止</button>
</body>

Javascript之动画1的更多相关文章

  1. JavaScript实现动画效果

    说到JavaScript实现动画效果,不得不想到两个函数,setTimeout和setInterval. setTimeout的常用的使用方法为 setTimeout(callback, delay) ...

  2. 原生JavaScript中动画与特效的实现原理

    现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...

  3. javascript帧动画

    前面的话 帧动画就是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成的动画.由于是一帧一帧的画,所以帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容. ...

  4. javascript之动画特效

    JavaScript的动画用的最多的3个api就是setInterval().setTimeout()和requestAnimationFrame()

  5. "Javascript高性能动画与页面渲染"笔记

    前言:好久没翻阅我的gmail邮箱了,午休时就打开看了一下,看到InfoQ推荐的一篇名为“Javascript高性能动画与页面渲染”文章,粗略的看了一下,很赞!讲的很详细,对好些细节讲的都很好,很通俗 ...

  6. Javascript高性能动画与页面渲染

    转自:http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering No setT ...

  7. JavaScript之动画2

    在JavaScript动画中,我们调用setInterval函数(setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象),值得注意的是:setInterval它设置的时 ...

  8. Javascript - Jquery - 动画

    动画(Dynamic) JQuery动画必须是在标准文档下使用 否则可能引起动画时抖动或其它不可预知的结果,标准文档格式:   <!DOCTYPE html PUBLIC "-//W3 ...

  9. [转]Javascript高性能动画与页面渲染

    No setTimeout, No setInterval 作者 李光毅 发布于 2014年4月30日 如果你不得不使用setTimeout或者setInterval来实现动画,那么原因只能是你需要精 ...

  10. JavaScript进阶【五】利用JavaScript实现动画的基本思路

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Qt技巧：QProcess与外部程序的调用

    项目做到一定阶段,常常须要在原来的project上调用外部程序. Qt为此提供了QProcess类,QProcess可用于完毕启动外部程序,并与之交互通信. 一.启动外部程序的两种方式: (1)一体式 ...

  2. 4.3、Libgdx启动类和配置

    (原文:http://www.libgdx.cn/topic/45/4-3-libgdx%E5%90%AF%E5%8A%A8%E7%B1%BB%E4%B8%8E%E9%85%8D%E7%BD%AE) ...

  3. 【M10】在构造方法内阻止资源泄漏

    1.类中没有指针,如果对象构造过程中出现异常,C++保证已经构造好的那一部分自动销毁.注意:这里不是调用析构方法,而是编译器在你的构造方法中插入了一些代码,保证对已经构造好的对象析构. 2.类中有指针 ...

  4. Codeforces Educational Codeforces Round 5 B. Dinner with Emma 暴力

    B. Dinner with Emma 题目连接: http://www.codeforces.com/contest/616/problem/A Description Jack decides t ...

  5. wget 命令用法详解

    wget是在Linux下开发的开放源代码的软件,作者是Hrvoje Niksic,后来被移植到包括Windows在内的各个平台上.它有以下功能和特点:(1)支持断点下传功能:这一点,也是网络蚂蚁和Fl ...

  6. Android集成支付宝接口 实现在线支付

    手机的在线支付,被认为是2012年最看好的功能,我个人认为这也是移动互联网较传统互联网将会大放光彩的一个功能. 人人有手机,人人携带手机,花钱买东西,不再需要取钱付现,不再需要回家上网银,想买什么,扫 ...

  7. IFormatProvider,ICustomFormatter,IFormattable总结

    IFormatProvider中 public object GetFormat(Type formatType); 该方法主要用于获取一个 ICustomFormatter接口的实例 ICustom ...

  8. ZOJ 2588 Burning Bridges（求含重边的无向连通图的割边） - from lanshui_Yang

    Burning Bridges Time Limit: 5 Seconds Memory Limit: 32768 KB Ferry Kingdom is a nice little country ...

  9. 用PredicateBuilder实现Linq动态拼接查询

    在使用Linq查询的时候,特别是如果你在使用Entiry Framwork,有时会遇到动态查询的情况(客户的查询条件是不固定的拼接查询).我们能想到的第一方案应该是拼接SQL,的确这样是可以达到我们的 ...

  10. 将一副图片编译进uboot

    在uboot显示图片的时候可以将jpg图片作为uboot的一段,在程序中访问该段,实现图片. 图片: logo.jpg ,将其拷贝到common下 修改u-boot.lds,添加".log& ...