做一发canvas粒子光点

第一次不扯淡写点东西……同时这天是徒弟生日,徒弟生快!

上效果=>  生日快乐>w<

首先我用的canvas框架是create.js,认识这货是在极客学院,表示英语不好看手册基本无力了。

如效果,粒子效果看起来是松散的 ,实际上却很平均,这个我是用网格划分的。直接上代码(算法比较渣轻喷):

var stage,canvas,shape,csize,grip;//定义几个全局变量
window.onload = function(){
grip = {x:16,y:7,w:0,h:0};//初始化网格,设置网格数量
csize = {width:0,height:0};//初始化窗口大小

//获取canvas标签并在标签上建立舞台,设置FPS
canvas = document.getElementById("c");
stage = new createjs.Stage(canvas);
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",ticker);
stage.addEventListener("stagemousedown",stageClick);
resize();
makeByRandom();//首次生成
window.onresize = function(){resize()};
};
//在每一帧循环的事件里面轮询一下以便实现效果
function ticker(e){
check();
sMove();
stage.update(e);
}
//检测光斑是否消失->如果消失则在相应网格重建光斑
function check(){
var n = stage.getNumChildren();
for(i=0;i<n;i++){
var s = stage.getChildAt(i);
if(s.alpha <= 0){
var gripX = s.gripX;
var gripY = s.gripY;
stage.removeChildAt(i);
sMake(gripX,gripY,(Math.random()-0.5)*5+5);
break;
}
}
}
//随机生成(事实上是随便起的名字我真心不会起函数名啊啊啊啊
function makeByRandom(){
for(var x=1;x<=grip.x+1;x++){
for(var y=1;y<grip.y+1;y++){
sMake(x,y,(Math.random()-0.5)*5+5);
}
}
}
//单个光斑的生成函数,需要获取网格位置
function sMake(gripX,gripY,r){
//根据提供的半径画个圆
var s = new createjs.Shape();
s.graphics.beginFill("#ffffff").drawCircle(0,0,r);
//获取到网格的位置
s.gripX = gripX;
s.gripY = gripY;
s.alpha = 0;
//在网格的随机位置生成一个0不透明度的圆形,定义它的终点和中心点
s.x = grip.w*(gripX-0.5)+(Math.random()-0.5)*grip.w;
s.x2 = grip.w*(gripX-0.5)+(Math.random()-0.5)*grip.w;
s.xc = (s.x+ s.x2)/2;
s.y = grip.h*(gripY-0.5)+(Math.random()-0.5)*grip.h;
s.y2 = grip.h*(gripY-0.5)+(Math.random()-0.5)*grip.h;
s.yc = (s.y+ s.y2)/2;
s.moving = false;//初始化运动状态为否
stage.addChild(s);
}
//定义运动函数 这里用到的是CreateJS里面的TweenJS
function sMove(){
var n = stage.getNumChildren();
for(i=0;i<n;i++){
var s = stage.getChildAt(i);
if(!s.moving){
var time = Math.random()*11000+500;//随机生成一个动画时间
createjs.Tween.get(s).to({x: s.xc,y: s.yc,alpha:1},time).to({x: s.x2,y: s.y2,alpha:0},time);
s.moving = true;
}
}
}
//下面这个是在屏幕大小发生变化的时候修改网格设置
function resize(){
canvas.width = csize.width = document.body.clientWidth;
canvas.height = csize.height = document.body.clientHeight;
grip.w = csize.width/grip.x;
grip.h = csize.height/grip.y;
}

于是这个效果极其简单。

这个效果存在的问题有很多:

  1. 部分TweenJS代码因为手册没看懂(捂脸)而写的很赘余
  2. 坐标部分麻烦
  3. 尚未通过窗口大小修改生成的光斑面积,导致小窗口效果很差
  4. 可控制性差

于是下一步是想通过控制光斑动作来让光斑根据命令排列(codepen上看到的灵感因为他代码太多懒得看就没看(请叫我懒b))。

示例页面爱扒就扒反正没啥好扒的2333333

标签: canvas, html5, createjs

添加新评论