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>

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

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

HTML5+jQuery制作温馨浪漫爱心表白动画特效

HTML5+jQuery制作温馨浪漫爱心表白动画特效 代码下载地址:http://www.zuidaima.com/share/1695882735602688.htm...
  • yaerfeng
  • yaerfeng
  • 2014年02月14日 10:22
  • 32038

转载:值得回味的H5 离子 小动画

lang="en">     charset="UTF-8">   particle nets     html,body{ ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

H5相关小动画代码(个人笔记)

以下代码均在HBuilder软件下执行: 一、图片的淡入       1、首先需要在html页面建一个的盒子(建议在body标签里建),并放上需要用到这个效果的图片     如:     ...
  • DDZYW
  • DDZYW
  • 2016年05月26日 18:28
  • 196

使用Html5的canvas制作的小动画

周末闲来无事,了解了下html5动画制作的一些基本流程,写了个小例子。 记录下来, html代码。在最后测试了下Kinetic.js。 下载地址 http://kineticjs.com  Dow...

收集了几个h5案例 与大家分享一下

h5的时代已经悄然来临。不知不觉中,h5的创意作品已经漫步在生活中的各个角落。喜欢看电影的盆友们会发现,前些上映的一些电影宣传都是采用去别人之前的创意宣传。接下来就跟大家分享几个影视圈的h5案例。 ...

android和H5之间的交互 最近用到这个比较多 很多知识都忘了 来巩固一下

hybrid App开发也不是什么新鲜事了,其中native和h5之间的交互则是必不可少的。Android中是如何和H5交互的? 1、webView加载页面 我们都知道在Android中是通过...
  • sx2358
  • sx2358
  • 2017年07月11日 10:03
  • 196

【C++源码】基于Win32窗口编程实现的小动画

翻开3年前刚接触计算机编程时作为练习写下的小动画源码,仿佛又回去那段充满乐趣的学习阶段,那时每当写完一个小程序都会有一种发自内心的自豪,都会有问自己离真正的程序员是不是已经很近了?回首阅读这些代码,不...
  • nlqlove
  • nlqlove
  • 2012年06月09日 19:58
  • 6460

C#程序设计(二十一)----编写一个图片不断向左移动的小动画

* 程序的版权和版本声明部分 * Copyright (c) 2012, 烟台大学计算机学院学生 * All rights reserved. * 作 者: 刘镇 * 完成日期: 2...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:H5小动画,分享一下!!
举报原因:
原因补充:

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