EVANYOU尤大个人网站主页CANVAS三角彩带效果分析学习
尤雨溪网站三角彩带效果
效果：
源码
Document
技巧点
- 为了适应不同物理大小及缩放比例屏幕, 保证像素一致性:
- 画布大小 = innerWidth * devicePixelRatio
- canvas缩放变换 x.scale(devicePixelRatio, devicePixelRatio)
- 颜色区间取值算法
- 颜色递减因子
r -= Math.PI * 2 / -50, 负的360度*五十分之一, 从1->0 - x.fillStyle = '#' + (cos(r) * 127 + 128 << 16 | cos(r + Math.PI / 3) * 127 + 128 << 8 | cos(r + Math.PI / 3 * 2) * 127 + 128).toString(16)
随便取一组:
#fd334e
#fb275d
#f61c6d
#ef137d
#e60b8d
#dc069d
#d002ac
#c401ba
#b601c8
#a703d4
#9708e0
#870ee9
#7816f1
#681ff7
#582bfc
#4937fe
#3b45fe
#2f53fd
#2362f9
#1972f4
调色是项艺术,自行追究.
- 三角形点算法
function y(p) {
var t = p + (z() * 2 - 1.1) * f
return (t > h || t < 0) ? y(p) : t
// y->[-1.1, 0.9)
}