<!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. css样式实现字体删除线效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. C#程序设计六大原则记录

    本文目的在于记录,方便以后的回顾 http://www.uml.org.cn/sjms/201211023.asp 设计模式六大原则(1):单一职责原则 定义:不要存在多于一个导致类变更的原因.通俗的 ...

  3. JavaSE思维导图(八)

  4. Unity StrangeIoc框架 （一）

    最近想项目中需要使用这个架构  因此 上网看了很多资料摸索   但是对于初学者来说大多数的资料不是那么容易理解 而且文档也是英文的阅读起来有点吃力  所以记录一下自己阅读的过程  方便以后翻阅和跟我一 ...

  5. C语言函数可变参数列表

    C语言允许使用可变参数列表,我们常用的printf函数即为可变参数函数,C标准库提供了stdarg.h为我们提供了这方面支持:该头文件提供了一些类型和宏来支持可变参数列表,包括类型va_list,宏v ...

  6. 笔记-AndroidStudio开发环境的搭建

    首先当然是下载AndroidStudio,目前最新的稳定版是1.1 然后下载studio版本的sdk,如果用原装sdk,需要更新   安装的过程中会选择sdk的路径,此时如果已经解压了原装sdk,会进 ...

  7. java堆溢出的小栗子

    package com.xiaoysec.test; import java.util.ArrayList; import java.util.List; /** *VM Args:-verbose: ...

  8. 一行统计shell

    cat count.log | awk '{print $7}' | awk '{if ($1 == "-") empty++ }END {print NR, empty, emp ...

  9. POJ1323-Game Prediction

    描述: Suppose there are M people, including you, playing a special card game. At the beginning, each p ...

  10. wampserver 绑定域名(wampserver 本地域名测试配置)

    一.tomact 配置虚拟主机 1.打开Apache菜单下“httpd.conf”文件: 找到“# Include conf/extra/httpd-vhosts.conf” , 把这句前面的#号去掉 ...