H5小动画,分享一下!!

原创 2015年11月19日 22:13:51
<!DOCTYPE html>
  <html>
  <head>
  <title> new document </title>
  <meta charset="utf-8"/>
   
  </head>
   
  <body >
  <script>
  var bd=document.getElementsByTagName('body')[0];
  var canvas=document.createElement('canvas');
  bd.appendChild(canvas);
  var context=canvas.getContext('2d');
  canvas.width=window.innerWidth;
  canvas.height=window.innerHeight;
  //定义彩球的构造器
  function circle(){
  this.x=Math.random()*canvas.width;
  this.y=canvas.height;
  this.r1=Math.random()*10+1;
  this.r2=parseInt(Math.random()*256);
  this.g=parseInt(Math.random()*256);
  this.b=parseInt(Math.random()*256);
  this.paint=function(){
  if(this.y<canvas.height/2-50){
   
   
  context.strokeStyle='#69b6b1';
  context.lineWidth=.2;
  context.beginPath();
  context.arc(this.x,this.y,this.r1,0,Math.PI*2);
  context.stroke()
  }else if(this.y<canvas.height/2){
  context.fillStyle='#69b6b1';
  context.lineWidth=.2;
  context.beginPath();
  context.arc(this.x,this.y,this.r1,0,Math.PI*2);
  context.fill()
   
   
   
   
  }else{
  context.fillStyle='rgb('+this.r2+','+this.g+','+this.b+')';
  context.beginPath();
  context.arc(this.x,this.y,this.r1,0,Math.PI*2);
  context.fill()}
  };
  this.step=function(){
   
  this.y--;
   
   
   
  }
  }
  var circles=[];
  var time=0;//控制数量;
  //定义所有彩球的绘制方法和移动
  function createCircles(){
  time++;
  if(time%10==0){
  circles.push(new circle())
  }
  for(var i=0,l=circles.length;i<l;i++){
  circles[i].paint();
  circles[i].step();
  }
  }
  //优化性能删除画布外面的圈圈
  function deleteCircles(){
  for(var i=0,l=circles.length;i<l;i++){
  if(this.y<0){
  circles.splice(i,1)
  }
   
  }
   
  }
  //核心定时器
  var img=new Image();
  img.src='bg.jpg'//这里图片路径
  var timer=setInterval(function(){
  context.drawImage(img,0,0,canvas.width,canvas.height)
  createCircles()
  deleteCircles()
   
   
  },10)
   
   
   
  </script>
  </body>
 

</html>

//气泡在背景图中 上升  到消失 代码中不插入图片看不到效果

 
版权声明:本文为博主原创文章,未经博主允许不得转载。

点赞+1 效果

见图案代码附上:
  • qq_16559905
  • qq_16559905
  • 2016年08月09日 16:27
  • 2463

移动端案例、web前端项目实战(HTML5+css3)、webApp实例源码

闲暇之余,整理一些之前运用HTML5+css3开发的项目案例,pc端项目、web前端项目,移动端webApp实例~~~ 移动端web网站(webApp滑屏效果—地产App—旅游web)、web前端开...
  • xiaoyan_2015
  • xiaoyan_2015
  • 2016年12月07日 00:39
  • 27379

页面中加入一个人体时钟和仓鼠动画

效果图: 代码如下:
  • cxfly957
  • cxfly957
  • 2017年09月07日 13:45
  • 270

iOS中 Animation 动画大全 韩俊强的博客

1.iOS中我们能看到的控件都是UIView的子类,比如UIButton UILabel UITextField UIImageView等等 2.UIView能够在屏幕的显示是因为在创建它的时候内部...
  • qq_31810357
  • qq_31810357
  • 2015年10月21日 18:37
  • 6097

移动端(h5)浏览器分享选择好友总结

需求:需要在微信、各种移动端浏览器、QQ内置浏览器中实现将页面分享至微信好友、朋友圈、新浪微博、QQ好友、QQ空间。  分析:常用插件(百度、jiathis等)对于移动端的微信分享会出现上面刚开始讨论...
  • cddcj
  • cddcj
  • 2017年06月22日 11:03
  • 4623

h5+分享到微信、朋友圈代码示例

h5微信分享
  • m0_38073829
  • m0_38073829
  • 2017年06月29日 14:13
  • 6454

iOS中 仿Tumblr点赞心破碎动画 韩俊强的博客

最近Tumblr轻博客无论是web端还是移动端,都非常受欢迎,简单调研了一下,其中动画是我感兴趣的,特此写了个仿Tumblr点赞心破碎动画;...
  • qq_31810357
  • qq_31810357
  • 2017年04月13日 14:44
  • 2876

iOS中 喷枪打字动画的实现

iOS中 喷枪打字动画的实现
  • qq_31810357
  • qq_31810357
  • 2015年10月29日 08:25
  • 3161

h5页面在微信内部分享

今天自己写了一个微信分享的功能,可以说遇到了很多坑,但最好还是顺利完成了,分享给大家,让大家少爬一点坑 1.引用js: 2.生成签名: wx.config({ debug: fal...
  • qq_32328207
  • qq_32328207
  • 2017年11月07日 15:38
  • 690

html(h5)页面实现微信js分享

html(h5)页面实现微信js分享
  • huwei2003
  • huwei2003
  • 2016年08月31日 16:12
  • 25577
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:H5小动画,分享一下!!
举报原因:
原因补充:

(最多只允许输入30个字)