<!doctype html>

 <html>

 <head>

   <meta charset="UTF-8">

   <title>canvasTest</title>

 </head>

 <body>

 <input type="button" id="clbtn" value="清除画布" style="border:1px solid #444;display:block;margin: 10px auto;" />

 <canvas id="canvas" style="border:1px solid #444;display:block;margin: 10px auto;"></canvas>

 </body>

 <script>

 window.onload=function(){

     var clbtn=document.getElementById("clbtn");

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

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

     canvas.width=1000;

     canvas.height=500;

     function ball(x,y,vx,colorindex){

         this.x=x;

         this.y=y;

         this.r=22;

         this.g=2;

         this.vx=vx;

         this.vy=-20;

         this.colorindex=colorindex;

         this.color=['red','blue','green','orange','yellow','pink'];

     };

     var balls=[];

 //    context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=flase)

 //                  圆心坐标    ，半径值   ，开始角度    ，结束角度，    顺逆时针(默认flase顺时针)

     canvas.onmousedown=function(){

         canvas.onmousemove=function(e){

             var e= event || ev;

             var x = e.clientX-canvas.offsetLeft;

             var y = e.clientY-canvas.offsetTop+document.body.scrollTop;

             balls.push(new ball(x,y,Math.floor(Math.random()*30-5),Math.floor(Math.random()*6+1)));

             }

         };

     canvas.onmouseup=function(){

         canvas.onmousemove=null;

         };

     setInterval(function(){

         cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);//清除画布20帧

         for(var i = 0 ;i<balls.length;i++)

         {

             balls[i].x += balls[i].vx;

             balls[i].y += balls[i].vy;

             balls[i].vy += balls[i].g;

             cxt.beginPath();

             cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,2*Math.PI);

             cxt.closePath();

             cxt.fillStyle=balls[i].color[balls[i].colorindex];

             cxt.fill();

             cxt.strokeStyle='white';

             cxt.stroke();

             document.title = balls.length;

             if(  balls[i].y>=500 -  balls[i].r)

             {

                  balls[i].y = 500 -  balls[i].r;

                  balls[i].vy = - balls[i].vy*0.7;

             }

             if(  balls[i].x>=1000 -  balls[i].r )

             {

                 balls[i].x = 1000 -  balls[i].r ;

                  balls[i].vx = - balls[i].vx*0.7;

             }

             if(balls[i].x<=0+  balls[i].r)

             {

                 balls[i].x = 0 +  balls[i].r ;

                  balls[i].vx = - balls[i].vx*0.7;

             }

         };

         },50);

 clbtn.onclick=function(){

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

         balls.splice(0,balls.length);//清空数组

         };

 }

 </script>

 </html>

canvas绘制弹跳小球的更多相关文章

  1. canvas基础绘制-一个小球的坠落、反弹

    效果如图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. （canvas）两小球碰撞后的速度问题研究

    这两天在研究canvas碰撞 先把小球开始运动的图拿出来 参考了一下别的的代码,在两个小球碰撞处理上,我觉得不完善 怎么样处理才算完善呢,当然是要用高中物理学的动量守恒了和机械能守恒了 机械能守恒我其 ...

  3. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  4. 用canvas绘制折线图

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

  5. 封装 用canvas绘制直线的函数--面向对象

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

  6. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  7. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

  8. Canvas绘制图形

    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  9. [canvas]利用canvas绘制自适应的折线图

    前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...

随机推荐

  1. poj1552---枚举

    #include <stdio.h> #include <stdlib.h> int main() { ],th=,i,j; while(scanf("%d" ...

  2. oracle导入导出exp,imp

    exp dadifilm/oracle@dg file=/tmp/dadi.dmp full=y imp u_data/321@dg1  file=/dadi_desc.dmp Import: Rel ...

  3. thunk的主要用法

    主要用法目前用的多的就三种; thunk.all 并发 thunk.sql 同步 thunk.race 最先返回的进入结果输出 前两个返回的结果都是数组,最后一个返回的是对象: thunk的链式调用没 ...

  4. Sequence operation(线段树区间多种操作)

    Sequence operation Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  5. DOM4J读取XML文件

    最近在做DRP的项目,其中涉及到了读取配置文件,用到了DOM4J,由于是刚开始接触这种读取xml文件的技术,好奇心是难免的,于是在网上又找了一些资料,这里就结合找到的资料来谈一下读取xml文件的4中方 ...

  6. 整合Spring.net到asp.net网站开发中初探

    整合Spring.net到asp.net网站开发中初探 http://www.veryhuo.com 2009-10-21 烈火网 投递稿件 我有话说   Spring提供了一个轻量级的用于构建企业级 ...

  7. c# 小数的处理

    数值类型处理小数 1.Math.Round(x) 四舍五入      Math.Round(0.4) 0     Math.Round(-1.7) -2 2.Math.floor(x) 小于等于 x, ...

  8. Android Log工具类

    import java.text.SimpleDateFormat; import java.util.Date; import android.util.Log; public class LogU ...

  9. 第三条：私有化构造器或者枚举类型强化Singleton属性

    1.5版本之前,我们通常实现单例模式有两种方式: 两种方法前提都是私有化构造器,然后通过不同的方式获取对象. 第一种:通过公共的静态变量获取 public class Elivs{ // 私有化构造器 ...

  10. codeforces 603C. Lieges of Legendre sg函数

    题目链接 n堆石子, 可以拿走一堆中的一颗, 或者将一堆数量为2*x的石子分为k堆x个的石子.k由题目给出. k分奇偶讨论. k为偶数时,k堆x个的石子异或结果为0: k为奇数时, k堆x个石子异或结 ...