Tutorials & Docs<\/a>\u00a0\u4e00\u6b65\u4e00\u6b65\u9032\u884c\u5373\u53ef\uff0c\u6587\u4ef6\u53ea\u6709\u5c11\u8a31\u932f\u8aa4\uff0c\u642d\u914d\u7db2\u9801\u539f\u59cb\u78bc\u5373\u53ef\u7406\u89e3<\/p>\n\u5982\u679c\u5716\u6c92\u6709\u51fa\u73fe\uff0c\u8acb\u5c07\u7db2\u5740\u7684 https \u6539\u6210 http \u5373\u53ef<\/p>\n
--<\/p>\n
\u6210\u679c<\/h2>\n
![\"\"](\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/02\/Winwheel.png\")
<\/p>\n
\u7a0b\u5f0f\u78bc<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"zh-TW\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Winwheel<\/title>\r\n\r\n <script src=\"https:\/\/code.jquery.com\/jquery-3.7.0.min.js\"><\/script>\r\n\r\n <!-- bootstrap -->\r\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/fastbootstrap@2.2.0\/dist\/css\/fastbootstrap.min.css\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\r\n\r\n <script src='Winwheel.min.js'><\/script>\r\n <script src='TweenMax.min.js'><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<canvas id='canvas' width='300' height='320' onClick=\"startSpin();\"><\/canvas>\r\n\r\n<script>\r\n let theWheel = new Winwheel({\r\n numSegments : 6,\r\n textFontSize : 32,\r\n lineWidth : 0,\r\n innerRadius : 20,\r\n textOrientation : 'horizontal',\r\n centerY : 170,\r\n rotationAngle : -30,\r\n segments :\r\n [\r\n {'fillStyle' : '#eae56f', 'text' : '1'},\r\n {'fillStyle' : '#89f26e', 'text' : '2'},\r\n {'fillStyle' : '#7de6ef', 'text' : '3'},\r\n {'fillStyle' : '#adc8ff', 'text' : '4'},\r\n {'fillStyle' : '#d7b5fe', 'text' : '5'},\r\n {'fillStyle' : '#e7706f', 'text' : '6'},\r\n ],\r\n animation :\r\n {\r\n type : 'spinToStop',\r\n duration : 0.5,\r\n spins : 2,\r\n callbackFinished : 'alertPrize()',\r\n callbackAfter : 'drawTriangle()',\r\n }\r\n });\r\n\r\n drawTriangle();\r\n\r\n function startSpin(){\r\n theWheel.rotationAngle = theWheel.rotationAngle % 360;\r\n theWheel.startAnimation();\r\n }\r\n\r\n function alertPrize(){\r\n let winningSegment = theWheel.getIndicatedSegment();\r\n console.log(winningSegment.text);\r\n }\r\n\r\n function drawTriangle(){\r\n c = theWheel.ctx;\r\n c.save();\r\n c.lineWidth = 2;\r\n c.strokeStyle = 'black';\r\n c.fillStyle = 'black';\r\n c.beginPath();\r\n c.moveTo(130, 10);\r\n c.lineTo(170, 10);\r\n c.lineTo(150, 42);\r\n c.lineTo(130, 10);\r\n c.stroke();\r\n c.fill();\r\n c.restore();\r\n }\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n\u8f03\u5c0f\u7684\u4e09\u89d2\u5f62<\/strong><\/p>\n\u4fee\u6539 drawTriangle() \u7684c \u8def\u5f91<\/p>\n
c.moveTo(140, 10);\r\nc.lineTo(160, 10);\r\nc.lineTo(150, 25);\r\nc.lineTo(140, 10);<\/pre>\n![\"\"](\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/02\/2024-03-12-09-11-14.png\")
<\/p>\n
--<\/p>\n
\u79fb\u9664\u9078\u4e2d<\/h2>\n
\u7a0b\u5f0f\u78bc<\/p>\n
let segmentNumber = theWheel.getIndicatedSegmentNumber();\r\ntheWheel.deleteSegment(segmentNumber);\r\ntheWheel.draw();<\/pre>\n
\n- .getIndicatedSegmentNumber() \u53d6\u5f97\u4f4d\u7f6e<\/li>\n
- .deleteSegment() \u522a\u9664<\/li>\n
- .draw() \u91cd\u65b0\u7e6a\u88fd<\/li>\n<\/ul>\n
--<\/p>\n
\u5728 Modal \u986f\u793a<\/h2>\n
\u6307\u5b9a id \u4f7f\u7528 canvasId<\/p>\n
theWheel = new Winwheel({\r\n canvasId: 'wheelCanvas',\r\n outerRadius: 190,\r\n innerRadius: 50,\r\n textFontSize: 16,\r\n numSegments: segments.length,\r\n segments: segments,\r\n animation: {\r\n type: 'spinToStop',\r\n duration: 5,\r\n spins: 8,\r\n callbackFinished: function (segment) {\r\n console.log('\ud83c\udf89 \u606d\u559c\u7372\u5f97: ' + segment.text);\r\n $('#spinButton').prop('disabled', false);\r\n }\r\n }\r\n});<\/pre>\n <\/p>\n
--<\/p>\n
<\/div>\n