<!DOCTYPE html>

<head>

<title>canvas</title>

<style>

.canvas{

   border: 1px solid #000;

}

</style>

</head>

<body>

<canvas class="canvas" id="canvas" width="400px" height="400px"></canvas>

<script>

window.onload=function(){

   var can=document.getElementById("canvas");

   var cxt=can.getContext("2d");

   var ball={

      x:100,

      y:100,

      vx:4,

      vy:2,

      radius:20,

      color:"blue",

      draw:function(){

        cxt.beginPath();

        cxt.arc(this.x,this.y,this.radius,0,Math.PI*2,true);

        cxt.closePath();

        cxt.fillStyle=this.color;

        cxt.fill();

      }

   };

   var draw=function(){

       cxt.clearRect(0,0,canvas.width,canvas.height);

       ball.draw();

       ball.x+=ball.vx;

       ball.y+=ball.vy;

       if(ball.vy+ball.y>canvas.height-15 || ball.vy+ball.y<15){

           ball.vy=-ball.vy;

       }

       if(ball.vx+ball.x>canvas.width-15 || ball.vx+ball.x<15){

           ball.vx=-ball.vx;

       }

       window.requestAnimationFrame(draw);

       //window.setTimeout(function(){

       //      draw();

       //},100);

   };

   draw();

};

</script>

</body>

</html>

canvas制作运动的小球的更多相关文章

  1. 利用canvas制作乱跑的小球

    canvas制作乱跑的小球 说明:将下面的代码放到html的body就可以,键盘控制上(W)下(S)左(A)右(D) <body> <canvas id="canvas&q ...

  2. JavaScript实例：运动的小球

    本篇博文通过制作一个小球运动动画的实例,来学习在HTML5的画布上实现动画制作的方法,同时理解面向对象程序设计的基本思想. 1．绘制小球 先在HTML页面中设置一个画布. <canvas id= ...

  3. 自定义View，随着手指运动的小球

    这个实例是自定的view的初步介绍,要设计的是一个随着手指运动的小球.原理是随时获取手指的坐标,然后在这个坐标上面实时改变自定义view的坐标.这个view仅仅是画了一个圆形而已. 自定义的view ...

  4. Canvas制作动态进度加载水球

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

  5. Expression Design与Blend制作滚动的小球动画教程

    原文:Expression Design与Blend制作滚动的小球动画教程 一,开发工具 Microsoft Expression Design & Blend 4.0 (3.0亦可). 这两 ...

  6. 用Canvas制作简单的画图工具

    今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...

  7. 酷！使用 jQuery & Canvas 制作相机快门效果

    在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...

  8. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  9. 使用canvas制作在线画板

    canvas绘图的强大功能,让人前仆后继的去研究它.代码全部加起来不足百行.还用到了h5中的<input type="color"/>和<input type=& ...

随机推荐

  1. python web开发之flask框架学习(2) 加载模版

    上次学习了flask的helloword项目的创建,这次来学习flask项目的模版加载: 第一步:创建一个flask项目 第二步:在项目目录的templates文件夹下创建一个html文件 第三步: ...

  2. luogu4240 毒瘤之神的考验(毒瘤乌斯反演)

    link 题意:求出\(\sum_{i=1}^n\sum_{j=1}^m\varphi(ij)\),对998244353取模 多组数据,\(T\le 10^4,n,m\le 10^5\). 前置知识: ...

  3. C++学习笔记-关键词

    1.friend友元 采用类的机制后实现了数据的隐藏与封装,类的数据成员一般定义为私有成员,成员函数一般定义为公有的,依此提供类与外界间的通信接口.但是,有时需要定义一些函数,这些函数不是类的一部分( ...

  4. svn显示提交人以及时间

    eclipse使用svn显示提交人以及提交时间,方便查看自己修改过的代码,过程如下: Window-->Preferences-->Team-->SVN-->Lable dec ...

  5. java背包的数组实现，链表实现

    数组实现 package base.structure; import java.lang.reflect.Array; import java.util.Iterator; /** * @progr ...

  6. java中所有开源注解收集

    @resource: resource全名为@Resource ,用来激活一个命名资源(namedresource)的依赖注入,在JavaEE应用程序中,该注解被典型地转换为绑定于JNDI conte ...

  7. Filter责任链模式

    Filter责任链的创建 org.apache.catalina.core.ApplicationFilterFactory#createFilterChain,  此方法是被org.apache.c ...

  8. NMS_非极大值抑制（转）

    NMS(non maximum suppression),中文名非极大值抑制,在很多计算机视觉任务中都有广泛应用,如:边缘检测.目标检测等. 这里主要以人脸检测中的应用为例,来说明NMS,并给出Mat ...

  9. Python入妖5-----正则的基本使用

    什么是正则表达式 正则表达式是对字符串操作的一种逻辑公式,就是 事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符”,这个“规则字符” 来表达对字符的一种过滤逻辑. 正则并不是pyth ...

  10. 转 使用utl_http获取某个http页面内容

    #########1.ACL详细解释: 11g 对于XDB  UTL_HTTP or others package 的权限管控进一步加强,如果需要使用到XDB 以下包 UTL_TCP, UTL_SMT ...