专栏名称: SegmentFault思否
SegmentFault （www.sf.gg）开发者社区，是中国年轻开发者喜爱的极客社区，我们为开发者提供最纯粹的技术交流和分享平台。
目录
相关文章推荐
码农翻身  ·  第一批鸿蒙激励金到账，选鸿蒙选对了！ ·  3 天前  
码农翻身  ·  形势很严重，劝全体码农们做好准备吧！ ·  4 天前  
程序员的那些事  ·  娱乐圈大佬甩百度网盘链接，几十G资料首度曝光… ·  1 周前  
程序员小灰  ·  现在这形势，劝程序员们极限存钱吧，从11月开始！ ·  1 周前  
码农翻身  ·  全世界两万多Linux内核贡献者，出现了一个杀人犯 ·  1 周前  
51好读  ›  专栏  ›  SegmentFault思否

撩妹技能 get，教你用 canvas 画一场流星雨

SegmentFault思否  · 公众号  · 程序员  · 2017-09-08 08:00

正文

开始

妹子都喜欢流星，如果她说不喜欢，那她一定是一个假妹子。

现在就一起来做一场流星雨，用程序员的野路子浪漫一下。

要画一场流星雨，首先，自然我们要会画一颗流星。

玩过 canvas 的同学，你画圆画方画线条这么 6，如果说叫你画下面这个玩意儿，你会不会觉得你用的是假 canvas？canvas 没有画一个带尾巴玩意儿的 api 啊。

画一颗流星

是的，的却是没这个 api，但是不代表我们画不出来。流星就是一个小石头，然后因为速度过快产生大量的热量带动周围的空气发光发热，所以经飞过的地方看起来就像是流星的尾巴，我们先研究一下流星这个图像，整个流星处于他自己的运动轨迹之中，当前的位置最亮，轮廓最清晰，而之前划过的地方离当前位置轨迹距离越远就越暗淡越模糊。

上面的分析结果很关键， canvas 上是每一帧就重绘一次，每一帧之间的时间间隔很短。流星经过的地方会越来越模糊最后消失不见，那有没有可以让画布画的图像每过一帧就变模糊一点而不是全部清除的办法？如果可以这样，就可以把每一帧用线段画一小段流星的运动轨迹，最后画出流星的效果。

骗纸！你也许会说，这那里像流星了？？？

别急，让我多画几段给你看看。

什么？ 还是不像？ 我们把它画小点，这下总该像了把？

上面几幅图我是在 ps 上模拟的，本质上 ps 也是在画布上绘画，我们马上在 canvas 上试试。

那，直接代码实现一下。

  1. // 坐标
  2. class Crood {
  3.     constructor(x=0, y=0) {
  4.         this.x = x;
  5.         this.y = y;
  6.     }
  7.     setCrood(x, y) {
  8.         this.x = x;
  9.         this.y = y;
  10.     }
  11.     copy() {
  12.         return new Crood(this.x, this.y);
  13.     }
  14. }
  16. // 流星




    

  17. class ShootingStar {
  18.     constructor(init=new Crood, final=new Crood, size=3, speed=200, onDistory=null) {
  19.         this.init = init; // 初始位置
  20.         this.final = final; // 最终位置
  21.         this.size = size; // 大小
  22.         this.speed = speed; // 速度：像素/s
  24.         // 飞行总时间
  25.         this.dur = Math.sqrt(Math.pow(this.final.x-this.init.x, 2) + Math.pow(this.final.y-this.init.y, 2)) * 1000 / this.speed; 
  27.         this.pass = 0; // 已过去的时间
  28.         this.prev = this.init.copy(); // 上一帧位置




    

  29.         this.now = this.init.copy(); // 当前位置
  30.         this.onDistory = onDistory;
  31.     }
  32.     draw(ctx, delta) {
  33.         this.pass += delta;
  34.         this.pass = Math.min(this.pass, this.dur);
  36.         let percent = this.pass / this.dur;
  38.         this.now.setCrood(
  39.             this.init.x + (this.final.x - this.init.x) * percent,
  40.             this.init.y + (this.final.y - this.init.y) * percent
  41.         );
  43.         // canvas
  44.         ctx.strokeStyle = '#fff';
  45.         ctx.lineCap = 'round';
  46.         ctx.lineWidth = this.size;




    

  47.         ctx.beginPath();
  48.         ctx.moveTo(this.now.x, this.now.y);
  49.         ctx.lineTo(this.prev.x, this.prev.y);
  50.         ctx.stroke();
  52.         this.prev.setCrood(this.now.x, this.now.y);
  53.         if (this.pass === this.dur) {
  54.             this.distory();
  55.         }
  56.     }
  57.     distory() {
  58.         this.onDistory && this.onDistory();
  59.     }
  60. }
  63. // effet
  64. let cvs = document.querySelector('canvas');
  65. let ctx = cvs.getContext('2d');
  67. let T;
  68. let shootingStar = new ShootingStar(




    

  69.                         new Crood(100, 100), 
  70.                         new Crood(400, 400),
  71.                         3,
  72.                         200,
  73.                         ()=>{cancelAnimationFrame(T)}
  74.                     );
  76. let tick = (function() {
  77.     let now = (new Date()).getTime();
  78.     let last = now;
  79.     let delta;
  80.     return function() {
  81.         delta = now - last;
  82.         delta = delta > 500 ? 30 : (delta < 16? 16 : delta);
  83.         last = now;
  84.         // console.log(delta);
  85. 




    

  86.         T = requestAnimationFrame(tick);
  88.         ctx.save();
  89.         ctx.fillStyle = 'rgba(0,0,0,0.2)'; // 每一帧用 “半透明” 的背景色清除画布
  90.         ctx.fillRect(0, 0, cvs.width, cvs.height);
  91.         ctx.restore();
  92.         shootingStar.draw(ctx, delta);
  93.     }
  94. })();
  95. tick();

效果：一颗流星

sogoyi 快看，一颗活泼不做作的流星!!! 是不是感觉动起来更加逼真一点？

流星雨

我们再加一个流星雨 MeteorShower 类，生成多一些随机位置的流星，做出流星雨。

  1. // 坐标
  2. class Crood {
  3.     constructor(x=0, y=0) {
  4.         this.x = x;
  5.         this.y = y;
  6.     }
  7.     setCrood(x, y) {
  8.         this.x = x;
  9.         this.y = y;
  10.     }




    

  11.     copy() {
  12.         return new Crood(this.x, this.y);
  13.     }
  14. }
  16. // 流星
  17. class ShootingStar {
  18.     constructor(init=new Crood, final=new Crood, size=3, speed=200, onDistory=null) {
  19.         this.init = init; // 初始位置
  20.         this.final = final; // 最终位置
  21.         this.size = size; // 大小
  22.         this.speed = speed; // 速度：像素/s
  24.         // 飞行总时间
  25.         this.dur = Math.sqrt(Math.pow(this.final.x-this.init.x, 2) + Math.pow(this.final.y-this.init.y, 2)) * 1000 / this.speed; 




    

  27.         this.pass = 0; // 已过去的时间
  28.         this.prev = this.init.copy(); // 上一帧位置
  29.         this.now = this.init.copy(); // 当前位置
  30.         this.onDistory = onDistory;
  31.     }
  32.     draw(ctx, delta) {
  33.         this.pass += delta;
  34.         this.pass = Math.min(this.pass, this.dur);
  36.         let percent = this.pass / this.dur;
  38.         this.now.setCrood(
  39.             this.init.x + (this.final.x - this.init.x) * percent,
  40.             this.init.y + (this.final.y - this.init.y) * percent




    

  41.         );
  43.         // canvas
  44.         ctx.strokeStyle = '#fff';
  45.         ctx.lineCap = 'round';
  46.         ctx.lineWidth = this.size;
  47.         ctx.beginPath();
  48.         ctx.moveTo(this.now.x, this.now.y);
  49.         ctx.lineTo(this.prev.x, this.prev.y);
  50.         ctx.stroke();
  52.         this.prev.setCrood(this.now.x, this.now.y);
  53.         if (this.pass === this.dur) {
  54.             this.distory();
  55.         }
  56.     }
  57.     distory() {
  58.         this.onDistory && this.onDistory();
  59.     }
  60. }




    

  62. class MeteorShower {
  63.     constructor(cvs, ctx) {
  64.         this.cvs = cvs;
  65.         this.ctx = ctx;
  66.         this.stars = [];
  67.         this.T;
  68.         this.stop = false;
  69.         this.playing = false;
  70.     }
  72.     createStar() {
  73.         let angle = Math.PI / 3;
  74.         let distance = Math.random() * 400;
  75.         let init = new Crood(Math.random() * this.cvs.width|0, Math.random() * 100|0);
  76.         let final = new Crood(init.x + distance * Math.cos(angle), init.y + distance * Math.sin(angle));




    

  77.         let size = Math.random() * 2;
  78.         let speed = Math.random() * 400 + 100;
  79.         let star = new ShootingStar(
  80.                         init, final, size, speed, 
  81.                         ()=>{this.remove(star)}
  82.                     );
  83.         return star;
  84.     }
  86.     remove(star) {
  87.         this.stars = this.stars.filter((s)=>{ return s !== star});
  88.     }
  90.     update(delta) {
  91.         if (!this.stop && this.stars.length < 20) {
  92.             this.stars.push(this.createStar());
  93.         }
  94.         this.stars.forEach((star)=>{
  95.             star.draw(this.ctx, delta);




    

  96.         });
  97.     }
  99.     tick() {
  100.         if (this.playing) return;
  101.         this.playing = true;
  103.         let now = (new Date()).getTime();
  104.         let last = now;
  105.         let delta;
  107.         let  _tick = ()=>{
  108.             if (this.stop && this.stars.length === 0) {
  109.                 cancelAnimationFrame(this.T);
  110.                 this.playing = false;
  111.                 return;
  112.             }
  114.             delta = now - last;
  115.             delta = delta > 500 ? 30 : (delta < 16? 16 : delta);




    

  116.             last = now;
  117.             // console.log(delta);
  119.             this.T = requestAnimationFrame(_tick);
  121.             ctx.save();
  122.             ctx.fillStyle = 'rgba(0,0,0,0.2)'; // 每一帧用 “半透明” 的背景色清除画布
  123.             ctx.fillRect(0, 0, cvs.width, cvs.height);
  124.             ctx.restore();
  125.             this.update(delta);
  126.         }
  127.         _tick();
  128.     }
  130.     start() {
  131.         this.stop = false;
  132.         this.tick();
  133.     }
  135.     stop() {
  136.         this.stop = true;
  137.     }  




    

  138. }
  140. // effet
  141. let cvs = document.querySelector('canvas');
  142. let ctx = cvs.getContext('2d');
  144. let meteorShower = new MeteorShower(cvs, ctx);
  145. meteorShower.start();

效果：流星雨

透明背景

先不急着激动，这个流星雨有点单调，可以看到上面的代码中，每一帧，我们用了透明度为 0.2 的黑色刷了一遍画布，背景漆黑一片，如果说我们的需求是透明背景呢？

比如，我们要用这个夜景图片做背景，然后在上面加上我们的流星，我们每一帧刷一层背景的小伎俩就用不了啦。因为我们要保证除开流星之外的部分，应该是透明的。

这里就要用到一个冷门的属性了，globalCompositeOperation，全局组合操作？ 原谅我放荡不羁的翻译。

这个属性其实就是用来定义后绘制的图形与先绘制的图形之间的组合显示效果的。 

他可以设置这些值

这些属性说明没必要仔细看，更不用记下来，直接看 api 示例 运行效果就很清楚了。示例里，先绘制的是填充正方形，后绘制的是填充圆形。

是不是豁然开朗，一目了然？

对于我们来说，原图像是每一帧画完的所有流星，目标图像是画完流星之后半透明覆盖画布的黑色矩形。而我们每一帧要保留的就是，上一帧 0.8 透明度的流星，覆盖画布黑色矩形我们不能显示。

注意这里的 destination-out 和 destination-in，示例中这两个属性最终都只有部分源图像保留了下来，符合我们只要保留流星的需求。我觉得 w3cschool 上描述的不是很正确，我用我自己的理解概括一下。

  • destination-in ：只保留了源图像（矩形）和目标图像（圆）交集区域的源图像

  • destination-out：只保留了源图像（矩形）减去目标图像（圆）之后区域的源图像

上述示例目标图像的透明度是 1，源图像被减去的部分是完全不见了。而我们想要的是他可以按照目标透明度进行部分擦除。改一下示例里的代码看看是否支持半透明的计算。

看来这个属性支持半透明的计算。源图像和目标图像交叠的部分以半透明的形式保留了下来。也就是说如果我们要保留 0.8 透明度的流星，可以这样设置 globalCompositeOperation

  1. ctx.fillStyle = 'rgba(0,0,0,0.8)'
  2. globalCompositeOperation = 'destination-in';
  3. ctx.fillRect(0, 0, cvs.width, cvs.height);
  6. // 或者
  7. ctx.fillStyle = 'rgba(0,0,0,0.2)'
  8. globalCompositeOperation = 'destination-out';
  9. ctx.fillRect(0, 0, cvs.width, cvs.height);

最终效果

加上 globalCompositeOperation 之后的效果既最终效果：

github: 

https://github.com/gnauhca/dailyeffecttest/tree/master/b-meteorshower

快约上你的妹子看流星雨吧。

...

什么？ 你没有妹子？

相关文章推荐

canvas 初体验之 16 个经典 canvas 实例

原生 JS + Canvas 实现五子棋游戏

推荐文章
码农翻身  ·  第一批鸿蒙激励金到账，选鸿蒙选对了！
3 天前
码农翻身  ·  形势很严重，劝全体码农们做好准备吧！
4 天前
程序员的那些事  ·  娱乐圈大佬甩百度网盘链接，几十G资料首度曝光…
1 周前
程序员小灰  ·  现在这形势，劝程序员们极限存钱吧，从11月开始！
1 周前
码农翻身  ·  全世界两万多Linux内核贡献者，出现了一个杀人犯
1 周前
投资数据库  ·  百世物流、怡亚通、普路通代表的三种供应链服务的核心竞争力分析
7 年前
扬子晚报  ·  “不要勉强留住我的躯壳！”79岁琼瑶突发长文交代后事，网友炸了
7 年前
景观邦  ·  建筑界的AlphaGo，史上第一个人工智能建筑师出现了！
7 年前
每日一禅  ·  妻子决定了男人的位置
7 年前
拇指阅读  ·  《那年花开》孙俪：做戏里的主角，更要做生活里的群演
7 年前
Sov5搜索   ·   小百科   ·   移动版
51好读 - 好文章就要读起来!