引言

很早就想了解以下 canvas 中的拖尾效果(如彗星,烟花等效果)是怎么实现的,但是一直没有深入了解,正巧在 codepen 上看到一个 demo,代码简单,效果炫酷,故有此文。

什么黑科技

在我的想象中,实现这种效果是一定需要一个数组的,用来储存彗星的尾巴的位置,透明度,生命时长等信息。然后遍历这个数组,将这个尾巴画在 canvas 上。然而,万万没想到,真正的实现却简单的不像实力派,不需要 数组, 真正起作用来实现拖尾效果的关键是位于 clearCanvas 函数下面的三行代码:

  ctx.fillStyle="rgba(0,0,0,0.2)"
ctx.rect(0,0,w,h);
ctx.fill();

这里的技巧在于,在重绘制下一帧前,不是调用clearRect清除掉上一帧的内容,而是在上一帧基础上加上一个半透明蒙层,然后继续画下一帧。画的帧数多了,也就有了拖尾效果,拖尾效果的长短,跟蒙层的透明度有关,透明度越小,拖尾越长。如果你看到这里就明白了,那可以关掉这个页面了,否则的话就跟我一起来实现一个流星吧。

实现一个流星

效果如下:

See the Pen meteor by imgss
(@imgss) on CodePen.

如上所述,这个demo也是在绘制完一帧后,绘制下一帧之前,添加一层半透明蒙层,最终形成拖尾的效果

function draw() {
// 绘制流星
for(let star of stars){
star.draw()
star.move()
}
// 这里在不断加半透明蒙层,使上一帧的流星变淡
ctx.fillStyle = 'rgba(0,0,0,0.1)'
ctx.rect(0,0,800,600)
ctx.fill()
requestAnimationFrame(draw)
}

全部代码见codepen,本文完

浅谈canvas中的拖尾效果的更多相关文章

  1. cocos2d-x 2.0 拖尾效果分析

    转自:http://game.dapps.net/gamedev/game-engine/7281.html 在Cocos2d-x中,拖尾效果有一个专门的类CCMotionStreak来实现.下面我们 ...

  2. 【转】Cocos2d-x 2.0 拖尾效果深入分析

    Cocos2d-x 2.0 拖尾效果深入分析 另:本章所用Cocos2d-x版本为: cocos2d-2.0-x-2.0.2@ Aug 30 2012 http://cn.cocos2d-x.org/ ...

  3. 浅谈WPF中对控件的位图特效(WPF Bitmap Effects)

    原文:浅谈WPF中对控件的位图特效(WPF Bitmap Effects) -------------------------------------------------------------- ...

  4. [Unity3d]向量的过度方法以及拖尾效果

    Vector3.RotateTowards() 用法 public static function RotateTowards(current: Vector3, target: Vector3, m ...

  5. 浅谈JavaScript中的闭包

    浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...

  6. [Cocos2d-x For WP8]MotionStreak拖尾效果

    拖尾效果是指在在游戏中,一个精灵在运动的过程中会留下一个短暂的轨迹效果,在游戏里面如打斗的特效往往会需要用到这种效果来给运动的增加绚丽的效果.那么在Cocos2D-x里面我们可以使用一种内置的拖动渐隐 ...

  7. cocos2dx 以子弹飞行为例解说拖尾效果类CCMotionStreak

    在游戏开发中,有时会须要在某个游戏对象上的运动轨迹上实现渐隐效果.比方子弹的运动轨迹,假设不借助引擎的帮助,这样的效果则须要通过大量的图片来实现.而Cocos2D-x的拖动渐隐效果类CCMotionS ...

  8. 浅谈HTTP中GET、POST用法以及它们的区别

    浅谈HTTP中GET.POST用法以及它们的区别 HTTP定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符.我们可以这样认为: 一 ...

  9. Cocos Creator 的实现拖尾效果

    在游戏中,有时会需要在某个游戏对象上加上移动后的轨迹若隐若现的效果.使得游戏的效果较好,比如游戏大招,刀光,法术,流星划痕之类. Cocos Creator提供了一种内置的拖尾渐隐效果的实现方法:组件 ...

随机推荐

  1. unity中的Culling Mask

    摄像机按层渲染 Camera.cullingMask = 1<<x;//渲染x层 Camera.cullingMask = ~(1<<x);//渲染除去x的所有层 Camera ...

  2. 浅谈JS面向对象

    浅谈JS面向对象 一 .什么是面向过程 就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了.注重代码的过程部分. 二.什么是面向对象 最先出现在管理学 ...

  3. Unity打包提示UnityEditor.BuildPlayerWindow+BuildMethodException: Build failed with errors.错误

    不要将打包的输出路径设置为Assets文件夹下面即可,MD真坑 老外给出的解释: As you have noticed after you click build settings you are ...

  4. s6-7 TCP 传输策略

    TCP 传输策略 防止黏包现象的出现 当窗口数为 0 时,发送者不能正常发送数据段,除非: -Urgent数据.比如,用户想杀掉远端机器上的进程的时候,可以发送数据 -发送者可以发送一个字节的数据段, ...

  5. Problem creating zip: Execution exce ption (and the archive is probably corrupt but I could not delete it): Java heap space -> [Help 1]

    今天mvn编译的时候报错:  [ERROR] Failed to execute goal org.apache.maven.plugins:maven-assembly-plugin:2.5.5:s ...

  6. php签名认证

    一.概述 开年第一篇,该篇主要讲述了接口开发中,如何安全认证.如何用php签名认证. 二.说说历史 签名认证是什么?为什么要做签名认证?签名认证哪里会用到?no.no.no.....是不是,是不是,一 ...

  7. 5随机到7随机的C++实现

    一.5随机到7随机 //给定条件 int Rand1To5(){ + ; } //实现代码,使用插空法和筛的过程 int Rand1To7(){ ; do{ tmp = (Rand1To5() - ) ...

  8. DOM对象和jQuery对象的转换

    <script type="text/javascript"> //js的页面加载事件 window.onload = function () { //获取DOM对象 ...

  9. mac 电脑下svn

    mac点下使用的提交代码的方式是:eclipse + svn 的插件实现,总之中间遇到了很多的问题,不过还是都解决了. 前提是你已经安装了jdk. 安装的过程不再赘述直接上链接http://www.c ...

  10. opencl 参考源码及benchmark

    转载:https://www.zhihu.com/question/25539755/answer/44917891 CUDA 5之前的版本有OpenCL的sample,可以上网找找看 AMD APP ...