javascript - 如何在段的 fillStyle 上使用渐变颜色。 [风轮]

Question

有谁知道如何在 fillStyle 上设置渐变颜色，文档中提到这是可能的，但它没有任何示例，我不知道如何调用属性或方法来使用它。

http://dougtesting.net/winwheel/refs/class_segment

http://dougtesting.net/winwheel/docs/tut7_colours_lines_fonts

另外我已经在官方github网站上查看过，仍然找不到任何解决方案。

Answer 1

Winwheel.js 代码利用了很多 HTML Canvas 功能，fillStyle 就是其中之一。这意味着您可以为 fillStyle 使用任何标准的 HTML Canvas 选项，例如纯色、透明颜色 (alpha) 和渐变。

这是一个示例，说明如何使用 Winwheel 制作最简单的渐变类型 - 径向渐变。我修改了基本码盘示例...

// First get the context of the canvas as the gradient is created on this.
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

// Create radial gradient (this works best with the roundness of the wheel)
// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient
// Many values should be the centre of the canvas. If the canvas is square can just use the height / 2.
// The remaining values are the radius of the starting circle then the radius of the ending circle.
let canvasCenter = canvas.height / 2;

// x0,y0,r0,x1,y1,r1
let radGradient = ctx.createRadialGradient(canvasCenter, canvasCenter, 50, canvasCenter, canvasCenter, 250);

// Add the colour stops - 0.0 should be the first, 1.0 the last, others in between.
radGradient.addColorStop(0, "red");
radGradient.addColorStop(0.5, "white");
radGradient.addColorStop(1, "aqua");

// Create new wheel object specifying the parameters at creation time.
let theWheel = new Winwheel({
    'numSegments'  : 8,           // Specify number of segments.
    'outerRadius'  : 212,         // Set outer radius so wheel fits inside the background.
    'textFontSize' : 28,          // Set font size as desired.
    'fillStyle'    : radGradient, // Can set the fillstyle globally.
    'segments'     :              // Define segments including colour and text.
    [
       {'text' : 'Prize 1'},
       {'text' : 'Prize 2'},
       {'text' : 'Prize 3'},
       {'text' : 'Prize 4'},
       {'text' : 'Prize 5'},
       {'text' : 'Prize 6'},
       {'text' : 'Prize 7'},
       {'text' : 'Prize 8'}
    ],
    'animation' :           // Specify the animation to use.
    {
        'type'     : 'spinToStop',
        'duration' : 5,     // Duration in seconds.
        'spins'    : 8,     // Number of complete spins.
        'callbackFinished' : alertPrize
    }
});

正如你在上面看到的，步骤是......

• 获取 Canvas
• 获取 Canvas 上下文
• 创建渐变设置 X 和 Ys 以及半径
• 添加色标
• 设置轮子的fillStyle为渐变

如果您想了解更多信息，我建议您在线查找有关 HTML canvas createRadialGradient 和 createLinearGradient 的教程。一个起点可以是 mozilla 开发者文档 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient

另外，还有一件事。如果您希望不同的段具有不同颜色的渐变，则创建多个 radialGradient - 例如 radGradientRed、radGradientGreen、radGradientBlue - 然后将渐变分配给每个段的 fillStyle，如下所示...

let theWheel = new Winwheel({
    'numSegments'  : 9,      // Specify number of segments.
    'outerRadius'  : 212,    // Set outer radius so wheel fits inside the background.
    'textFontSize' : 28,     // Set font size as desired.
    'segments'     :         // Define segments including colour and text.
    [
       {'fillStyle' : radGradientBlue,  'text' : 'Prize 1'},
       {'fillStyle' : radGradientRed,   'text' : 'Prize 2'},
       {'fillStyle' : radGradientGreen, 'text' : 'Prize 3'},
       {'fillStyle' : radGradientBlue,  'text' : 'Prize 4'},
       {'fillStyle' : radGradientRed,   'text' : 'Prize 5'},
       {'fillStyle' : radGradientGreen, 'text' : 'Prize 6'},
       {'fillStyle' : radGradientBlue,  'text' : 'Prize 7'},
       {'fillStyle' : radGradientRed,   'text' : 'Prize 8'},
       {'fillStyle' : radGradientGreen, 'text' : 'Prize 9'}
    ],
});

问候，道格。