Нужно добавить обводку колесу
Создано колесо удачи, нужно добавить обводку вокруг него, нужный цвет - E3D5C8, код колеса оставлю ниже
const spinWheel = document.getElementById("spinWheel");
const spinBtn = document.getElementById("spin_btn");
const text = document.getElementById("text");
const spinValues = [
{ minDegree: 31, maxDegree: 60, value: 'Ноутбук игровой MSI Katana GF76 12UD-263RU' },
{ minDegree: 0, maxDegree: 30, value: 'Lush3 + Ridge x 1 + Микрофон HyperX Quadcast S' },
{ minDegree: 61, maxDegree: 90, value: 'Беззеркальная камера Canon EOS R50 Body' },
{ minDegree: 331, maxDegree: 360, value: 'Lovense Webcam + Domi 2' },
{ minDegree: 301, maxDegree: 330, value: '"Капуста"' },
{ minDegree: 271, maxDegree: 300, value: '"Картошка"' },
{ minDegree: 211, maxDegree: 240, value: 'Apple iPhone 15' },
{ minDegree: 241, maxDegree: 270, value: '"Морковь"' },
{ minDegree: 181, maxDegree: 210, value: 'Cougar Throne – кресло для геймеров' },
{
minDegree: 151,
maxDegree: 180,
value: "Сертификат ВБ"
},
];
const size = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10];
var spinColors = [
"#303032",
"#303032",
"#303032",
"#303032",
"#303032",
"#303032",
"#303032",
"#303032",
"#303032",
"#303032",
"#303032",
"#303032",
];
let spinChart = new Chart(spinWheel, {
plugins: [ChartDataLabels],
type: "pie",
data: {
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
datasets: [{
backgroundColor: spinColors,
data: size,
}, ],
},
options: {
responsive: true,
animation: { duration: 0 },
plugins: {
tooltip: false,
legend: {
display: false,
},
datalabels: {
rotation: 90,
color: "#ffffff",
formatter: (_, context) => context.chart.data.labels[context.dataIndex],
font: { size: 24 },
},
},
},
});
const generateValue = (angleValue) => {
for (let i of spinValues) {
if (angleValue >= i.minDegree && angleValue <= i.maxDegree) {
text.innerHTML = `<p>Поздравляем, вы выиграли: <br> ${i.value} ! </p>`;
spinBtn.disabled = false;
break;
}
}
};
let count = 0;
let resultValue = 101;
spinBtn.addEventListener("click", () => {
// spinBtn.disabled = false;
// text.innerHTML = `<p>Желаю Удачи!</p>`;
let randomDegree = Math.floor(Math.random() * (355 - 0 + 1) + 0);
let rotationInterval = window.setInterval(() => {
spinChart.options.rotation = spinChart.options.rotation + resultValue;
spinChart.update();
if (spinChart.options.rotation >= 360) {
count += 1;
resultValue -= 5;
spinChart.options.rotation = 0;
} else if (count > 15 && spinChart.options.rotation == randomDegree) {
generateValue(randomDegree);
clearInterval(rotationInterval);
count = 0;
resultValue = 101;
}
}, 10);
});
@import url('https://fonts.cdnfonts.com/css/rounds-black');
:root {
/* Colors */
--white_color: rgb(255, 255, 255);
--gold_color: rgb(227, 213, 200);
--green_color: rgb(45, 252, 26);
--body_background: linear-gradient(to right, #141e30, #243b55);
--spin_background: linear-gradient(to right, #C8B44F, #7D7A67);
}
h1 {
position: absolute;
font-size: 4rem;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--gold_color);
}
.container {
width: 90%;
max-width: 600px;
margin-top: 70px;
max-height: 600px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 3rem;
border-radius: 1rem;
}
.wheel_box {
position: relative;
width: 100%;
height: 100%;
}
.wheel_box img {
width: 110px;
height: 110px;
}
#spinWheel {
max-height: inherit;
width: inherit;
transform: rotate(270deg);
}
#spin_btn {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
height: 26%;
width: 26%;
border-radius: 50%;
cursor: pointer;
border: 0;
background: var(--spin_background);
color: var(--white_color);
text-transform: uppercase;
font-size: 1.8rem;
letter-spacing: 0.1rem;
font-weight: 600;
}
.fa-solid {
position: absolute;
top: -8%;
left: 45.5%;
font-size: 4rem;
background: linear-gradient(to right, #C8B44F, #7D7A67);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transform: rotate(-225deg);
}
#text {
font-size: 20px;
text-align: center;
margin-top: 1.5rem;
color: var(--gold_color);
font-family: 'Rounds Black', sans-serif;
}
<div class="container">
<div class="wheel_box">
<canvas id="spinWheel"></canvas>
<button id="spin_btn"><img src="./img/vipbaza.png"alt="Logo"></button>
<i class="fa-solid fa-location-arrow"></i>
</div>
<div id="text"></div>
</div>
<script src="script.js"></script>