开源夏令营之项目汇报3

最新推荐文章于 2024-07-18 14:29:38 发布

夏浅

最新推荐文章于 2024-07-18 14:29:38 发布

阅读量512

点赞数

分类专栏：开源夏令营文章标签： canvas css html javascript

本文链接：https://blog.csdn.net/u012797015/article/details/37731681

版权

开源夏令营专栏收录该内容

11 篇文章 0 订阅

订阅专栏

7月13日，周日

项目：html5光影粒子引擎

上次报告说到做自己的js库，这次说下不用js库，只用canvas的简单粒子的实现。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>canvas粒子动画</title>
<style>
*{margin:0;padding:0;}
</style>

   canvas.addEventListener('mousemove',t_mouse,false); //监听鼠标的实时移动
   function t_mouse(e){
    mouse.x = e.pageX;
    mouse.y = e.pageY;
   }

   function draw(){
    ctx.globalCompositeOperation = "source-over";
    ctx.fillStyle="black"; //设置填充色
    ctx.fillRect(0,0,W,H);
    ctx.globalCompositeOperation = "lighter"; //叠加的部分变得更亮
    for(var i=0;i < pas.length;i++){
     var p = pas[i]; //每产生一个球就赋值给p
     ctx.beginPath(); //开始绘制
     p.opacity = Math.round(p.r_life/p.life*100); //设置透明度,若不用r_life除，会太大

     var grad = ctx.createRadialGradient(p.loc.x,p.loc.y,0,p.loc.x,p.loc.y,p.rad);//设置放射性(圆形)渐变，p.rad结束直径

     grad.addColorStop(0,"rgba("+p.r+","+p.g+","+p.b+","+p.opacity+")");
     grad.addColorStop(0.5,"rgba("+p.r+","+p.g+","+p.b+","+p.opacity+")");
     grad.addColorStop(1,"rgba("+p.r+","+p.g+","+p.b+",0)"); //完全不透明
     ctx.fillStyle = grad;//填充
     ctx.arc(p.loc.x,p.loc.y,p.rad,Math.PI*2,false);//绘制弧形，火焰腾空而起肯定不可能是方形的,不乘以2就是半圆
     ctx.fill();//填充

//消失就是透明度和半径不断在减少，透明度就是生命周期

p.r_life--;
p.rad--;

p.loc.x += p.speed.x; //坐标不断随机变化，也就是一边移动一边消失
p.loc.y += p.speed.y;

     if(p.r_life < 0 || p.rad < 0){//消失后重新生成
      pas[i] = new par();
     }
    }
   }
   setInterval(draw,33);
  }
</script>
</head>

<body>
<canvas id="canvas" width=100% height=100%></canvas>
</body>
</html>