旋转星空
不存在什么东西是你不能学会的。你学不会的,只是它的一种形态;你需要做的,就是找到它的另一种,你可以学会的形态。 地址
CTX.createRadialGradient()
创建一个径向渐变,可以作为fillStyle和strokeStyle属性的值来使用,需要配合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.globalAlpha或fillStyle一个带有透明度的颜色来弱化前一帧的画面,达到拖尾效果。这个项目里有几个地方会产生拖尾
Star.prototype.draw方法中,画星星之前,会修改globalAlphaanimation中设置globalAlpha