[canvas] Segment de Roue de la chance
Bonjour à tous , je cherche à créer une roue de la chance .
J'aimerais le même comportement qu'ici :
https://wheelofnames.com/
Mon problème actuel est pour créer un segment.
Je m'explique, je souhaite que lorsque je rentre un prénom le texte s'affiche au fur et à mesure qu'il est tapé dans un segment et que lorque la touche "entrée" est relâchée celà valide le segment, puis on ajoute un autre segment de la même manière et ainsi de suite.
J'utilise la bibliothèque winwheel.js.
Voici mon code html :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="styles.css" />
<title>Canvas</title>
</head>
<body>
<canvas id="canvas" width="880" height="300"></canvas>
<div
id="names"
spellcheck="false"
contenteditable="true"
class="textarea"
style="overflow: auto; width: 300px; height: 200px; border: solid black"
onKeyUp="maj(event);"
></div>
<script src="Winwheel.min.js"></script>
<script src="app.js"></script>
</body>
</html> |
et mon javascript:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
let theWheel = new Winwheel();
const elt = document.getElementById("names");
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function addSegment(texte) {
// Use a date object to set the text of each added segment to the current minutes:seconds
// (just to give each new segment a different label).
let date = new Date();
let color = getRandomColor();
// The Second parameter in the call to addSegment specifies the position,
// in this case 1 meaning the new segment goes at the start of the wheel.
theWheel.addSegment(
{
text: texte,
fillStyle: color,
},
1
);
// The draw method of the wheel object must be called in order for the changes
// to be rendered.
theWheel.draw();
}
function maj(event) {
var x = event.keyCode;
let texte = "";
console.log(texte);
if (x == 13) {
texte = elt.textContent;
addSegment(texte);
}
} |
Quelle serait pour vous la meilleure méthode pour résoudre ce problème?
