<!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. [LeetCode][Python]Largest Number

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com'https://oj.leetcode.com/problems/largest ...

  2. 面向对象程序设计-C++_课时22向上造型

    赋值兼容规则是指在公有派生情况下,一个派生类的对象可以作为基类的对象来使用的情况. 约定类derived是从类base公有派生而来的,则指如下3种情况: (1)派生的对象可以赋给基类的对象.例如: d ...

  3. 请问下mtk双卡手机怎样发短信是怎样选择sim卡来发(双卡都可用的情况下)？

    如题,我如今可以获取双卡状态,当仅仅有单一卡的时候可以指定sim卡进行发短信,可是双卡都可用的情况下,程序就默认使用卡1发短信了.即使指定了sim卡编号.

  4. SQL SERVER 2000/2005/2008数据库数据迁移到Oracle 10G细述

    最近参与的一个系统涉及到把SQL Server 2k的数据迁移到Oracle 10G这一非功能需求.特将涉及到相关步骤列举如下供大家参考: 环境及现有资源: 1.OS: Windows 7 Enter ...

  5. 设计模式之---模板方法template method的使用

    在面向对象系统的分析与设计过程中经常会遇到这样一种情况:对于某一个业务逻辑(算法实现)在不同的对象中有不同的细节实现,但是逻辑(算法)的框架(或通用的应用算法)是相同的.Template Method ...

  6. JavaSE思维导图(五)

  7. [C#参考]利用Socket连续发送数据

    这个例子只是一个简单的连续发送数据,接收数据的DEMO.因为最近做一个项目,要求robot连续的通过Socket传回自己的当前的位置坐标,然后客户端接收到坐标信息,在本地绘制地图,实时显示robot的 ...

  8. Android Gradle配置

    解决问题 错误: Could not find the AndroidManifest.xml file, going up from path //打开app build.gradle文件加入以下代 ...

  9. C++の友元の例

    #include<iostream> #include<cmath> using namespace std; class Point { public: Point(doub ...

  10. 移动端的click

    移动端的click 移动端click和touch的关系 搬运 http://segmentfault.com/q/1010000000691822 手指在屏幕上滑动时 各个touch的触发顺序 tou ...