<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>七彩泡泡</title>
<style>
html,body{
margin:0;
padding:0;
width:100%;
height:100%;
overflow: hidden;
} </style>
</head>
<body>
<canvas id="canvas"></canvas> <script>
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 20);
};
})();
var mycanvas=document.getElementById("canvas");
var ctx=mycanvas.getContext("2d"); var W=window.innerWidth, H=window.innerHeight;
mycanvas.width=W;
mycanvas.height=H; var paintCanvas=function(){
ctx.fillStyle="rgba(0,0,0,1)";
//ctx.clearRect(0,0,W,H);
ctx.fillRect(0,0,W,H);
} var particleCount=200,
particles=[];
function Particle(){
this.x=Math.random()*W;
this.y=Math.random()*H;
this.vx=-1+Math.random()*2;
this.vy=-1+Math.random()*2;
this.radius=Math.random()*20;
this.color="rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+",1)"; //随机颜色 this.draw=function(){
ctx.fillStyle=this.color;
ctx.beginPath();
ctx.arc(this.x,this.y,this.radius,0,Math.PI*2);
ctx.fill();
} }
for(var i=0; i<particleCount;i++){
particles.push(new Particle())
} function draw() {
paintCanvas();
for (var i = 0; i < particles.length; i++) {
p = particles[i];
p.draw();
}
update();
} function update() {
for (var i = 0; i < particles.length; i++) {
p = particles[i];
p.x += p.vx;
p.y += p.vy;
if(p.x + p.radius > W)
p.x = p.radius; else if(p.x - p.radius < 0) {
p.x = W - p.radius;
} if(p.y + p.radius > H)
p.y = p.radius; else if(p.y - p.radius < 0) {
p.y = H - p.radius;
} }
}
function animloop() {
draw();
requestAnimFrame(animloop);
} animloop(); </script>
</body>
</html> canvas最简单的多粒子运动,可以更改圆形的大小,密度,运动速度,颜色等;

canvas梦幻七彩泡泡的更多相关文章

  1. HTML5 Canvas 梦幻的文字飞扬动画教程

    之前为大家介绍了一款HTML5/CSS3 3D文字特效 文字外翻效果.今天为大家带来的是html5 canvas实现的文字漂动动画效果.画面非常梦幻. 在线预览   源码下载 实现代码如下: html ...

  2. Canvas 实现七彩喷泉

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

  3. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  4. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  5. html5 canvas实现梦幻的3D刺猬球

    今天要为大家带来一款html5 canvas实现的梦幻的3D刺猬球.页面非常梦幻.效果图如下: 在线预览   源码下载 html代码: <div> <canvas width=&qu ...

  6. 使用Canvas绘制背景图

    原文  http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...

  7. Silverlight 雷达图和一种特殊泡泡画法

    原文:Silverlight 雷达图和一种特殊泡泡画法 自上次发了雷达图,也没怎么说一下. 这次又做了一种图,继续共享一下,就是以一个点为中心,周围绕着几个点,用一个箭头与中心相连并带有某些信息.圆 ...

  8. 新手自定义view练习实例之(一) 泡泡弹窗

    转载请注明出处:http://blog.csdn.net/wingichoy/article/details/50455412 本系列是为新手准备的自定义view练习项目(大牛请无视),相信在学习过程 ...

  9. Android为TV端助力 转载:Android绘图Canvas十八般武器之Shader详解及实战篇(下)

    LinearGradient 线性渐变渲染器 LinearGradient中文翻译过来就是线性渐变的意思.线性渐变通俗来讲就是给起点设置一个颜色值如#faf84d,终点设置一个颜色值如#CC423C, ...

随机推荐

  1. Substring Anagrams

    Given a string s and a non-empty string p, find all the start indices of p's anagrams in s. Strings ...

  2. syniverse是一家怎样的公司

    syniverse是一家怎样的公司?(详见问题描述)? 李超   核心业务当然是国际漫游了.简单来说就是做全球各个运营商之间的hub. 打个比方说,一家运营商A做通信,它的覆盖范围肯定是有限的(比如中 ...

  3. python #!/usr/bin/python 的作用

    在说之前,这里推荐写: #!/usr/bin/env python 进入正题,在 Python 里面第一行代码: #!/usr/bin/python 其他有的可能是 python2 或者 python ...

  4. 请写出一段python代码实现删除list里面的重复元素?

    l1 = ['b','c','d','c','a','a'] l2 = list(set(l1)) print(l2)

  5. [bzoj 3534][Sdoi2014] 重建

    传送门 Description  T国有N个城市,用若干双向道路连接.一对城市之间至多存在一条道路. 在一次洪水之后,一些道路受损无法通行.虽然已经有人开始调查道路的损毁情况,但直到现在几乎没有消息传 ...

  6. 4)抽象方法不能为private,final或者static,为什么?

    抽象方法的最实质的意 义在于被未来的子类覆盖实现掉.它自己是个空方法.private的实质意义在于本类其他方法调用它.你自己是个空方法,别人调用你有什么用?所以 abstract和private在一起 ...

  7. 使用 Nexus3 Repository Manager 搭建 npm 私服

    公司里一般都有自己的私服,用于管理封装的工具插件等,Nexus2主要是用于maven/gralde仓库的统一管理,Nexus3则添加了npm插件,可以对npm提供支持,其实用于npm仓库管理的还有一个 ...

  8. Centos7 node npm升级版本

    安装npm 官网:https://nodejs.org/en/download/ 下载LTS Linux Binaries (x64)版本. # tar xf node-v10.16.3-linux- ...

  9. 《Glibc内存管理》笔记DAY1

    目录 x86_64栈和mmap固定映射地址 内存的延迟分配 内核数据结构 mm_struct Heap 操作相关函数 Mmap 映射区域操作相关函数 内容来源 x86_64栈和mmap固定映射地址   ...

  10. 2018-2019-2 网络对抗技术 20165202 Exp8 Web基础

    博客目录 一.实践内容 Web前端HTML 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML Web前端javascipt 理解JavaScr ...