配置动态背景记录

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

this._options = {
    // 色带HSL饱和度
    colorSaturation: "80%",
    // 色带HSL亮度量
    colorBrightness: "60%",
    // 带状颜色不透明度
    colorAlpha: 0.65,
    // 在HSL颜色空间中循环显示颜色的速度有多快
    colorCycleSpeed: 6,
    // 从哪一侧开始Y轴 (top|min, middle|center, bottom|max, random)
    verticalPosition: "center",
    // 到达屏幕另一侧的速度有多快
    horizontalSpeed: 200,
    // 在任何给定时间，屏幕上会保留多少条带
    ribbonCount: 3,
    // 添加笔划以及色带填充颜色
    strokeSize: 0,
    // 通过页面滚动上的因子垂直移动色带
    parallaxAmount: -0.5,
    // 随着时间的推移，为每个功能区添加动画效果
    animateSections: true
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

    this._canvas = document.createElement("canvas");
    this._canvas.style["display"] = "block";
    this._canvas.style["position"] = "fixed";
    this._canvas.style["margin"] = "0";
    this._canvas.style["padding"] = "0";
    this._canvas.style["border"] = "0";
    this._canvas.style["outline"] = "0";
    this._canvas.style["left"] = "0";
    this._canvas.style["top"] = "0";
    this._canvas.style["width"] = "100%";
    this._canvas.style["height"] = "100%";
    this._canvas.style["z-index"] = "-1";
    this._canvas.id = "bgCanvas";
    this._canvas.style["background-color"]="#1f1f1f";
    this._onResize();