美文网首页
向外发射的颜色

向外发射的颜色

作者: Zola_4f36 | 来源:发表于2019-01-04 10:36 被阅读0次

<!DOCTYPE html>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>canvas7</title>

<style>

canvas { position: absolute; top: 0; left: 0; }

</style>

</head>

<body>

<canvas id="c" width="1349" height="195"></canvas>

<script>

var w = c.width = window.innerWidth

,h = c.height = window.innerHeight

,ctx = c.getContext( '2d' )

,opts = {

baseBaseSize: 15,

addedBaseSize: 5,

baseVel: 2,

addedVel: 1,

baseTime: 60,

addedTime: 20,

overTime: 5,

sliding: .99,

particleChance: .9,

particles: 100,

templateParticleColor: 'hsla(hue,80%,40%,alp)',

repaintAlpha: 'rgba(0,0,0,.1)',

startColor: .2,

fullColor: .5,

stopColor: .6,

timeToColorChange: 3

}

, particles = []

, tick = 0;

function Particle(){

this.reset();

}

Particle.prototype.reset = function(){

this.x = Math.pow( Math.random(), 1/4 );

this.y = h / 2;

var color = opts.templateParticleColor.replace( 'hue', this.x * 360 * 2 + tick * opts.timeToColorChange );

this.baseSize = ( Math.random() + this.x ) / 2 * ( opts.baseBaseSize + opts.addedBaseSize * Math.random() );

this.gradient = ctx.createRadialGradient( 0, 0, 0, 0, 0, this.baseSize / 2 );

this.gradient.addColorStop( opts.startColor, color.replace( 'alp', 0 ) );

this.gradient.addColorStop( opts.fullColor, color.replace( 'alp', 1 ) );

this.gradient.addColorStop( opts.stopColor, color.replace( 'alp', 1 ) );

this.gradient.addColorStop( 1, color.replace( 'alp', 0 ) );

this.vx = -( 1 + Math.random() / 10 - this.x) * ( opts.baseVel + Math.random() * opts.addedVel );

this.vy = Math.pow( this.x, 4 ) * ( opts.baseVel + Math.random() * opts.addedVel ) * ( Math.random() < .5 ? -1 : 1 );

this.x *= w / 2;

if( Math.random() < .5 ){

this.x = w - this.x;

this.vx *= -1;

}

this.time = opts.baseTime + opts.addedTime * Math.random();

this.tick = this.time + opts.overTime;

}

Particle.prototype.step = function(){

var size;

if( this.tick <= this.time ){

this.x += this.vx *= opts.sliding;

this.y += this.vy *= opts.sliding;

size = Math.pow( this.tick / this.time, 1/2 )

} else size = 1 - ( ( this.tick - this.time ) / opts.overTime ) + .000001;

--this.tick;

ctx.translate( this.x, this.y );

ctx.scale( size, size );

ctx.fillStyle = this.gradient;

ctx.fillRect( -this.baseSize / 2, -this.baseSize / 2, this.baseSize, this.baseSize );

ctx.scale( 1/size, 1/size );

ctx.translate( -this.x, -this.y );

if( this.tick <= 0 )

this.reset();

}

function anim(){

window.requestAnimationFrame( anim );

ctx.globalCompositeOperation = 'source-over';

ctx.fillStyle = opts.repaintAlpha;

ctx.fillRect( 0, 0, w, h );

ctx.globalCompositeOperation = 'lighter';

++tick;

if( particles.length < opts.particles && Math.random() < opts.particleChance )

particles.push( new Particle );

particles.map( function( particle ){ particle.step(); } );

}

ctx.fillStyle = '#222';

ctx.fillRect( 0, 0, w, h );

anim();

window.addEventListener( 'resize', function(){

w = c.width = window.innerWidth;

h = c.height = window.innerHeight;

ctx.fillStyle = '#222';

ctx.fillRect( 0, 0, w, h );

})

</script>

</body></html>

相关文章

  • 向外发射的颜色

    canvas7 canvas { position: absolute; ...

  • css3向外发射的动画

    html css

  • OpenGL ES-光照计算(公式)

    环境光的计算 环境光 = 光源的环境光颜色 * 物体的材质颜⾊ 发射光的计算 发射颜色 = 物体的反射材质颜⾊ 漫...

  • 《三体二黑暗森林》读后感

    但是三体人也猜到了罗辑的想法,并利用水滴向太阳发射电波,这样太阳就不再能放大地球向外发射的信号,罗辑向宇...

  • OpenGL 光照基础

    颜色与光照的关系 我们看到的物体的颜色,实际是光照射物体后发射的光进入眼睛后感受到的颜色,而不是物体实际材料的颜色...

  • 闲来一聊——你看到了什么

    地球向外星人发射信号 乘坐降落伞从天而降的仙女 长袖善舞的千手观音 毛细血管 大脑的树突

  • IBeacon关键字段解析

    IBeacon基站以固定的频率向外部发射信号,以便接收者接收到相应的信息而进行后续操作。苹果为Ibeacon设计了...

  • 「人类图」十二大星体

    001 太阳:The Sun 自我实现的原则,一生的工作闪闪发光的地方。阳。是我们生命的载体,唯一的恒星,向外发射...

  • 跟着猫的感觉走  作者  赖柯羽

    《日暮时分的客人》课堂实录 在写作当中,观察是向外发射探寻的目光,去与外界发生连接。而收到的信息,重新回到心里,成...

  • 发射 !发射!

    每一个人心中都有一个梦,那个梦,来自浩瀚的天空。每一只鹰身上都有一双铁翅,那双翅,来自苍穹。――题记 天空灰蒙蒙的...

网友评论

      本文标题:向外发射的颜色

      本文链接:https://www.haomeiwen.com/subject/dsdelqtx.html