时间戳

首页 > 解决方案 > 是否可以将字体真棒图标添加到 whiwheel.js 段

javascript - 是否可以将字体真棒图标添加到 whiwheel.js 段

问题描述

我正在使用Winwheel.js库来创建一个轮子。现在我想改变轮段的样式。我想将FontAwesome图标添加到带有文本的段中。可能吗？

我试过这样做，theWheel.segments[0].text="<span class='fas fa-viruses'> prize 1 </span>"但没有奏效

这是Winwheel.js库的链接

<html>
    <head>
        <title>Code Wheel</title>
        <script src='Winwheel.js'></script>
    </head>
    <body>
        <canvas id='canvas' width='880' height='300'>
            Canvas not supported, use another browser.
        </canvas>
        <script>
            let theWheel = new Winwheel({
                'numSegments'  : 8,         // Number of segments
                'outerRadius'  : 212,       // The size of the wheel.
                'centerX'      : 217,       // Used to position on the background correctly.
                'centerY'      : 219,
                'textFontSize' : 28,        // Font size.
                'segments'     :            // Definition of all the segments.
                [
                   {'fillStyle' : '#eae56f', 'text' : 'Prize 1'},
                   {'fillStyle' : '#89f26e', 'text' : 'Prize 2'},
                   {'fillStyle' : '#7de6ef', 'text' : 'Prize 3'},
                   {'fillStyle' : '#e7706f', 'text' : 'Prize 4'},
                   {'fillStyle' : '#eae56f', 'text' : 'Prize 5'},
                   {'fillStyle' : '#89f26e', 'text' : 'Prize 6'},
                   {'fillStyle' : '#7de6ef', 'text' : 'Prize 7'},
                   {'fillStyle' : '#e7706f', 'text' : 'Prize 8'}
                ],
                'animation' :               // Definition of the animation
                {
                    'type'     : 'spinToStop',
                    'duration' : 5,
                    'spins'    : 8,
                    'callbackFinished' : alertPrize
                }
            });
 
            // Called when the animation has finished.
            function alertPrize(indicatedSegment)
            {
                // Do basic alert of the segment text.
                alert("You have won " + indicatedSegment.text);
            }
        </script>
    </body>
</html>

标签： javascriptcss

解决方案

推荐阅读