<!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. Exec sql/c

    Exec sql/c 利用高级语言的过程性结构来弥补SQL语言实现复杂应用方面的不足. 嵌入SQL的高级语言称为主语言或宿主语言. 在混合编程中,SQL语句负责操作数据库,高级语言语句负责控制程序流程 ...

  2. python <tab>自动补全

    1.获取python目录[我使用的是64位ubuntu系统] [~$]python Python 2.7.3 (default, Apr 10 2013, 06:20:15) [GCC 4.6.3] ...

  3. 在.NET中快速创建一个5GB、10GB或更大的空文件

    对于通过UDP进行打文件传输的朋友应该首先会考虑到一个问题,那就是由于UDP并不会根据先来先到原则进行发送,也许你发送端发送的时候是以包1和包2的顺序传输的,但接收端可能以包2和包1 的顺序来进行接收 ...

  4. Selector、shape详解，注意这两种图像资源都以XML方式存放在drawable不带分辨率的文件夹中

    Selector.shape详解(一) Selector的结构描述: <?xml version="1.0" encoding="utf-8"?> ...

  5. 不要再坑人啦！NSOperation才是苹果推荐使用的多线程技术！

    首先声明一下.小汤我在实际开发中呢,实际上也是喜欢用GCD多一点,由于用起来感觉更方便. 可是,事实是什么呢? 苹果推荐使用的实际上是NSOperation.所以希望对此没有研究的各位不要再在博客中误 ...

  6. mvc下载文件

    MVC下载文件方式 方式一: public FileStreamResult DownFile(string filePath, string fileName)  {       string ab ...

  7. 3.一步一步学c#（三）：对象和类型

    类和结构 类和结构实际上都是创建对象的模板,每个对象都包含数据,并提供了处理和访问数据的方法,. 结构与类的区别是它们在内存中的存储方式,访问方式(类是存储在堆(heap)上的引用类型),而结构是存储 ...

  8. JS操作JSON的方法总结

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...

  9. 像jq那样获取对象的js原生方法

    使用过jq的童鞋非常喜欢jq获取对象的方法,只要$()就可以获取,在此我封装一个js获取对象的方法 [注意]只对chrome,Firefox,opera,Safari,ie8及ie8以上版本有效 fu ...

  10. no data type for node

    java.lang.IllegalStateException: No data type for node: org.hibernate.hql.ast.tree.IdentNode  \-[IDE ...