<!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. 面向对象程序设计-C++_课时12访问限制

    private: 只有这个类(相同的类,不同的对象也可以)的成员函数可以访问这些成员变量或函数 public: 任何人都可以访问 protected: 只有这个类以及它的子子孙孙可以访问

  2. 自学xml的几个例子

    xml是一种被用来传输和存储数据的语言,下面给出一些学习xml过程一些简单的例子.具体xml语法请转:http://www.w3school.com.cn/xml/xml_intro.asp 例子1: ...

  3. Sql Sever 字符串截取汉字

    最近需要在SQL的字符串中截取汉字,利用unicode函数判断字符的unicode编码,根据编码范围过滤掉非汉字字符. 写成了一个function /*@str 需要获取汉字的字符串*/ create ...

  4. C# 颜色有3种表示方式： 6位16进制、RGB、 颜色关键字

    最常用的是6位16进制的代码表示法.如bgcolor=#ff0000;其中#只是表示使用6位16进制的颜色代码声明颜色.代码的头两位即ff表示三原色中的红色,范围当然是16进制的00-ff,中间两位即 ...

  5. Mysql数据库中的EXISTS和NOT EXISTS

    SQL语言中没有蕴含逻辑运算.但是,可以利用谓词演算将一个逻辑蕴含的谓词等价转换为:p->q ≡┐p∨q. 我们通过一个具体的题目来分析:(具体的表和数据详见文章:Mysql数据库中的EXIST ...

  6. Django Web开发【2】Django入门

    配置开发环境 1.安装Python,我使用的是centos 6.0,python版本为2.6.6 2.安装Django,Django版本为1.3.5 在Django官网下载对应版本之后,解压压缩包,进 ...

  7. eclipse更改主题

    长期使用eclipse,导致视觉疲劳,就想着能否换个主题调节调节. 通过设置window>preferences>appearance设置theme,貌似不起作用. 一查,发现一个绝佳的网 ...

  8. linux中的ps命令用法。

    在linux中使用ps命令可以查看有哪些进程在运行和运行的状态.进程是否结束.进程有没有僵尸.哪些进程占用了过多的资源等等. ps命令最常用的是用于监控后台进程的工作情况. 名称:ps 使用权限:所有 ...

  9. eclipse 插件安装

    203.208.46.146 www.google.com203.208.46.146 dl.google.com203.208.46.146 dl-ssl.google.com

  10. 精通 VC++ 实效编程280例 - 01 窗口

    窗口是屏幕上的一个矩形区域.窗口分为3种:重叠窗口.弹出窗口和子窗口.每个窗口都有由系统绘制的“非客户区”和应用程序绘制的“客户区”.在 MFC 中,CWnd 类为各种窗口提供了基类. 1 通过 HW ...