canvas动画特效之星空

解析

用了requstAniFrame，浏览器每隔1000/60ms进行重绘，然后使用迭代完成无限运动，每个粒子是用构造函数来创建。
总体的配置使用静态类来做，值得一提的是鼠标移入时附近粒子变大，我是在静态类里面存放了一个存放初始半径的数组，从里面取值并赋值给存放粒子的数组，为的是不让粒子一直变大，形成555555的节奏

动画原理：

全局配置（粒子个数，存放粒子数组，存放粒子半径数组，粒子之间的最小距离，粒子距离鼠标的最小距离）
单个粒子配置，使用构造函数（颜色，半径，速度），把粒子存入全局配置中的存放粒子的数组，对应半径存入全局配置中的存放粒子半径的数组
利用requstAniFrame进行重绘，每次先清除画布，然后循环出全局变量存放的值，进行移动等操作

效果

代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">*{padding: 0;margin: 0;}html,body{width: 100%;height: 100%;overflow: hidden;/*background-color: #020215;*/}</style>
</head>
<body><canvas id="canvas"></canvas>
</body>
</html>
<script type="text/javascript">//兼容requestAnimFramewindow.requestAnimFrame = ( function() {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||function( callback ) {window.setTimeout( callback, 1000 / 60 );};})();//背景绘制函数function drawBg(cvs){cvs.beginPath();cvs.fillStyle="#020215";cvs.fillRect(0,0,wW,wH);cvs.save();}//随机数0-255（rgb）function ran255(){return Math.round(Math.random()*255);}//随机颜色构造函数function Color(){this.r=ran255();this.g=ran255();this.b=ran255();this.rgb="rgba("+this.r+","+this.g+","+this.b+",1)";}window.onload=function(){var can=document.getElementById("canvas");can.width=wW=window.innerWidth;can.height=wH=window.innerHeight;      var cvs=can.getContext("2d");//绘制背景     drawBg(cvs);//创建粒子配置（总体）,静态类var Dots={n:300,minDis:50,d_mouse:100,array:[],radiusArr:[]}//每个粒子的配置function Dot(){this.color = new Color();//创建随机颜色//圆心坐标this.x = Math.round(Math.random()*wW);this.y = Math.round(Math.random()*wH);//速度(不同方向)this.vx = (Math.random()-0.5)*3;this.vy = (Math.random()-0.5)*3;//随机半径this.radius = Math.round(Math.random()*5);}//初始化Dot.prototype.draw = function() {cvs.beginPath();cvs.fillStyle = this.color.rgb;cvs.arc(this.x,this.y,this.radius,0,360,false);cvs.fill();};//创建粒子并放入数组for(var i=0;i<Dots.n;i++){var dotObj = new Dot();Dots.array.push(dotObj);Dots.radiusArr.push(dotObj.radius);}//画出粒子function drawDots(){drawBg(cvs);for(var i=0;i<Dots.n;i++){Dots.array[i].draw();}}drawDots();//移动粒子function moveDots(){          for(var i=0;i<Dots.n;i++){var dot = Dots.array[i];//反弹判断if(dot.x <0 || dot.x>wW){dot.vx=-dot.vx;}if(dot.y <0 || dot.y>wH){dot.vy=-dot.vy;}dot.x += dot.vx;dot.y += dot.vy;}}//混合颜色//连线function connect(){function mixColor(dot1,dot2){var color1=dot1.color;var color2=dot2.color;var r1=dot1.radius;var r2=dot2.radius;var r=Math.floor((color1.r*r1+color2.r*r2)/(r1+r2));var g=Math.floor((color1.g*r1+color2.g*r2)/(r1+r2));var b=Math.floor((color1.b*r1+color2.b*r2)/(r1+r2));return "rgba("+r+","+g+","+b+",1)"}for(var i=0;i<Dots.n;i++){           for(var j=0;j<Dots.n;j++){var dot1 = Dots.array[i];var dot2 = Dots.array[j];var color=mixColor(dot1,dot2);if(Math.abs(dot1.x-dot2.x)<Dots.minDis && Math.abs(dot1.y-dot2.y)<Dots.minDis){cvs.lineWidth=0.2;cvs.beginPath();cvs.strokeStyle=color;cvs.moveTo(dot1.x,dot1.y);cvs.lineTo(dot2.x,dot2.y);cvs.stroke();}}}}can.onmousemove=function(ev){var ev=window.event || ev;var pX=ev.pageX;var pY=ev.pageY;        for(var i=0;i<Dots.n;i++){  if(Math.abs(Dots.array[i].x-pX)<Dots.d_mouse && Math.abs(Dots.array[i].y-pY)<Dots.d_mouse){var r=Dots.radiusArr[i]*5;Dots.array[i].radius=r;}else{Dots.array[i].radius=Dots.radiusArr[i];}}}//无限运动function infinateDot(){cvs.clearRect(0,0,wW,wH);moveDots();drawDots();connect();requestAnimationFrame(infinateDot)}infinateDot();}
</script>

canvas动画特效之星空相关推荐

分享8款令人惊叹的HTML5 Canvas动画特效
HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我们更加可以欣赏到超酷的动画特效.今天我从html5tricks网站上整理了8款令人惊叹的 ...
9个非常有趣的HTML5 Canvas动画特效合集
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
字掉落炫酷网站_16个富有创意的HTML5 Canvas动画特效集合
本文作者html5tricks,转载请注明出处 1.HTML5 Canvas高空瀑布下落湖面动画 HTML5 Canvas是一个神奇的网页技术,我们在Canvas画布上可以做任何有趣的事情.今天要分享 ...
Html5 canvas创意特效合集
Canvas就像一块画布,我们可以通过调用脚本在Canvas上绘制任意形状,甚至是制作动画.本文就是收集了很多非常富有创意的一些canvas动画特效例子,这些例子都非常适合大家学习. 1.3D篝火动画 ...
5、每周一点canvas动画--速度
查看全文 http://www.taodudu.cc/news/show-5250190.html 相关文章: 9个非常有趣的HTML5 Canvas动画特效合集小程序直播-疯狂点赞Canvas动画 ...
html画星空,html5 canvas绘制全屏的星空背景动画特效
特效描述:html5 canvas绘制全屏星空背景动画特效.html5 canvas背景动画,星空动画.连线区域跟随鼠标移动,外加碰壁检测代码结构 1. 引入JS 2. HTML代码 var m ...
html 穿越星空效果,html5 canvas绚丽3d星空飞行穿梭动画特效
简要教程这是一款使用 html5 canvas和 jQuery 制作的绚丽3d星空飞行穿梭动画特效.该3d星空飞行特效模拟了飞船在宇宙星空中快速穿梭的动画场景,效果非常逼真. HTML结构 HTML ...
php+js+背景特效,基于canvas+html5炫酷星空背景动画特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: Warp drive是一个轻量级的jQuery插件.可以帮助您创建一个很酷的交互式星空背景特效,这个星空背景特效可 ...
html做星空网页游戏,html5 canvas绚丽3d星空飞行穿梭动画特效
这是一款使用 html5 canvas和 jQuery 制作的绚丽3d星空飞行穿梭动画特效.该3d星空飞行特效模拟了飞船在宇宙星空中快速穿梭的动画场景,效果非常逼真. HTML结构 HTML结构就使用 ...

canvas动画特效之星空

解析

动画原理：

效果

代码

canvas动画特效之星空相关推荐

最新文章

热门文章

canvas动画特效 之 星空

解析

动画原理：

效果

代码

canvas动画特效 之 星空相关推荐

最新文章

热门文章

canvas动画特效之星空

canvas动画特效之星空相关推荐