19-08-31 Canvas旋转星空案例分析

238 阅读1分钟

旋转星空

不存在什么东西是你不能学会的。你学不会的,只是它的一种形态;你需要做的,就是找到它的另一种,你可以学会的形态。 地址

CTX.createRadialGradient()

创建一个径向渐变,可以作为fillStylestrokeStyle属性的值来使用,需要配合addColorStop使用

//由两个圆来限定这个径向渐变的形状,可以是圆,也可以是圆环
var grd = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
//由0到x,填充红色
grd.addColorStop(x, "red");
//由x到y,填充红色到蓝色的均匀渐变
grd.addColorStop(y, "blue");

星星光晕

CTX.globalCompositeOperation= lighter

lighter模式,是将重叠的两个像素点的rgb值,分三基色各自相加,小于等于FF的保留,大于FF的取FF为值,细细一想,这种做法,毫无例外的会让色彩变亮,始终趋向于纯白色(255,255,255)该项目中星星的光晕,就是通过将深色背景与同色系的渐变色星星作lighter操作得到的

星星拖尾

这个项目里的拖尾效果,属于动态拖尾,动态拖尾产生的原因:每一帧的开始,并不清除上一帧的画面,而是以CTX.globalAlphafillStyle一个带有透明度的颜色来弱化前一帧的画面,达到拖尾效果。这个项目里有几个地方会产生拖尾

  1. Star.prototype.draw方法中,画星星之前,会修改globalAlpha
  2. animation中设置globalAlpha