I've created roulette wheel function for random number generation purpose. I don't want repeat number to be appear, so I'm popping generated number out of queue. But i want FULL CIRCLE WITH NEW VALUES(EXCLUDING LAST GENERATED NUMBER), when you run it for second time. right now it is not showing full circle. how do i do it? any help would be appreciated.
var options = ["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", "43", "44", "45", "46", "47", "48", "49", "50"
];
var startAngle = 0;
var arc = Math.PI / (options.length / 2);
var spinTimeout = null;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;
var ctx;
document.getElementById("spin").addEventListener("click", spin);
function byte2Hex(n) {
var nybHexString = "0123456789ABCDEF";
return String(nybHexString.substr((n >> 4) & 0x0F, 1)) + nybHexString.substr(n & 0x0F, 1);
}
function RGB2Color(r, g, b) {
return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
}
function getColor(item, maxitem) {
var phase = 0;
var center = 128;
var width = 127;
var frequency = Math.PI * 2 / maxitem;
red = Math.sin(frequency * item + 2 + phase) * width + center;
green = Math.sin(frequency * item + 0 + phase) * width + center;
blue = Math.sin(frequency * item + 4 + phase) * width + center;
return RGB2Color(red, green, blue);
}
function drawRouletteWheel() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var outsideRadius = 200;
var textRadius = 160;
var insideRadius = 125;
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 500, 500);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.font = 'bold 14px Helvetica';
for (var i = 0; i < options.length; i++) {
var angle = startAngle + i * arc;
//ctx.fillStyle = colors[i];
ctx.fillStyle = getColor(i, options.length);
ctx.beginPath();
ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgb(220,220,220)";
ctx.fillStyle = "black";
ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius,
250 + Math.sin(angle + arc / 2) * textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
var text = options[i];
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
ctx.restore();
}
//Arrow
ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
ctx.fill();
}
}
function spin() {
spinAngleStart = Math.random() * 10 + 10;
spinTime = 0;
spinTimeTotal = Math.random() * 3 + 4 * 1000;
rotateWheel();
}
function rotateWheel() {
spinTime += 50;
if (spinTime >= spinTimeTotal) {
stopRotateWheel();
return;
}
var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
startAngle += (spinAngle * Math.PI / 180);
drawRouletteWheel();
spinTimeout = setTimeout('rotateWheel()', 30);
}
function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
ctx.save();
ctx.font = 'bold 50px Helvetica, Arial'; //GENERATED NUMBER
var text = options[index];
ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
ctx.restore();
var newOptions = options.splice(index, 1);
// options = options - options.slice(index,1);
// options = options - index;
}
function easeOut(t, b, c, d) {
var ts = (t /= d) * t;
var tc = ts * t;
return b + c * (tc + -3 * ts + 3 * t);
}
drawRouletteWheel();
<canvas id="canvas" width="500" height="500"></canvas>
<input type="button" value="SPIN THE WHEEL!" style="width: 200px;height: 100px;font-weight: bold;font-size: 18px;" id='spin' />
Like so; redefining arc after your array splice
var options = ["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", "43", "44", "45", "46", "47", "48", "49", "50"
];
var startAngle = 0;
var arc = Math.PI / (options.length / 2);
var spinTimeout = null;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;
var ctx;
document.getElementById("spin").addEventListener("click", spin);
function byte2Hex(n) {
var nybHexString = "0123456789ABCDEF";
return String(nybHexString.substr((n >> 4) & 0x0F, 1)) + nybHexString.substr(n & 0x0F, 1);
}
function RGB2Color(r, g, b) {
return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
}
function getColor(item, maxitem) {
var phase = 0;
var center = 128;
var width = 127;
var frequency = Math.PI * 2 / maxitem;
red = Math.sin(frequency * item + 2 + phase) * width + center;
green = Math.sin(frequency * item + 0 + phase) * width + center;
blue = Math.sin(frequency * item + 4 + phase) * width + center;
return RGB2Color(red, green, blue);
}
function drawRouletteWheel() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var outsideRadius = 200;
var textRadius = 160;
var insideRadius = 125;
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 500, 500);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.font = 'bold 14px Helvetica';
for (var i = 0; i < options.length; i++) {
var angle = startAngle + i * arc;
//ctx.fillStyle = colors[i];
ctx.fillStyle = getColor(i, options.length);
ctx.beginPath();
ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgb(220,220,220)";
ctx.fillStyle = "black";
ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius,
250 + Math.sin(angle + arc / 2) * textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
var text = options[i];
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
ctx.restore();
}
//Arrow
ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
ctx.fill();
}
}
function spin() {
spinAngleStart = Math.random() * 10 + 10;
spinTime = 0;
spinTimeTotal = Math.random() * 3 + 4 * 1000;
rotateWheel();
}
function rotateWheel() {
spinTime += 50;
if (spinTime >= spinTimeTotal) {
stopRotateWheel();
return;
}
var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
startAngle += (spinAngle * Math.PI / 180);
drawRouletteWheel();
spinTimeout = setTimeout('rotateWheel()', 30);
}
function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
ctx.save();
ctx.font = 'bold 50px Helvetica, Arial'; //GENERATED NUMBER
var text = options[index];
ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
ctx.restore();
var newOptions = options.splice(index, 1);
// options = options - options.slice(index,1);
// options = options - index;
arc = Math.PI / (options.length / 2);
}
function easeOut(t, b, c, d) {
var ts = (t /= d) * t;
var tc = ts * t;
return b + c * (tc + -3 * ts + 3 * t);
}
drawRouletteWheel();
<canvas id="canvas" width="500" height="500"></canvas>
<input type="button" value="SPIN THE WHEEL!" style="width: 200px;height: 100px;font-weight: bold;font-size: 18px;" id='spin' />
Related
Good day ! I am working and creating a spinning roulette and I'm trying to insert a value into my canvas so I will not add value manually into the code , and this is an array texts, so I will insert many arrays into my canvas, but the problem is the text is not displaying, but when I add text manually into my array [ ] then it is displaying
Here is what my UI looks like without value/array texts in it
And when I added value in this code like:
var options = ["Winner 1", "Winner 2"];
Then this is the output
The problem now is I cannot add value when inserted into my textbox. please advise me thank you!
var options = ["Winner 1", "Winner 2"];
var startAngle = 0;
var arc = Math.PI / (options.length / 2);
var spinTimeout = null;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;
var ctx;
document.getElementById("spin").addEventListener("click", spin);
function pushData(){
var inputText = document.getElementById('inputText').value;
options.push(inputText);
var pval = "";
for(i = 0; i<options.length; i++){
pval = pval + options[i];
}
document.getElementById('canvas').innerHTML =pval;
}
function byte2Hex(n) {
var nybHexString = "0123456789ABCDEF";
return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
}
function RGB2Color(r,g,b) {
return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
}
function getColor(item, maxitem) {
var phase = 0;
var center = 128;
var width = 127;
var frequency = Math.PI*2/maxitem;
red = Math.sin(frequency*item+2+phase) * width + center;
green = Math.sin(frequency*item+0+phase) * width + center;
blue = Math.sin(frequency*item+4+phase) * width + center;
return RGB2Color(red,green,blue);
}
function drawRouletteWheel() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var outsideRadius = 200;
var textRadius = 160;
var insideRadius = 125;
ctx = canvas.getContext("2d");
ctx.clearRect(0,0,500,500);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.font = 'bold 12px Helvetica, Arial';
for(var i = 0; i < options.length; i++) {
var angle = startAngle + i * arc;
//ctx.fillStyle = colors[i];
ctx.fillStyle = getColor(i, options.length);
ctx.beginPath();
ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgb(220,220,220)";
ctx.fillStyle = "black";
ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius,
250 + Math.sin(angle + arc / 2) * textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
var text = options[i];
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
ctx.restore();
}
//Arrow
ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
ctx.fill();
}
}
function spin() {
spinAngleStart = Math.random() * 10 + 10;
spinTime = 0;
spinTimeTotal = Math.random() * 3 + 4 * 1000;
rotateWheel();
}
function rotateWheel() {
spinTime += 30;
if(spinTime >= spinTimeTotal) {
stopRotateWheel();
return;
}
var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
startAngle += (spinAngle * Math.PI / 180);
drawRouletteWheel();
spinTimeout = setTimeout('rotateWheel()', 30);
}
function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
ctx.save();
ctx.font = 'bold 30px Helvetica, Arial';
var text = options[index]
ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
ctx.restore();
}
function easeOut(t, b, c, d) {
var ts = (t/=d)*t;
var tc = ts*t;
return b+c*(tc + -3*ts + 3*t);
}
drawRouletteWheel();
<!-- Spin the wheel -->
<div class="container">
<input type="button" class="mt-5 btn btn-lg btn-primary btn-block" value="SPIN THE WHEEL" style="float:left;" id='spin' />
</div>
<!-- The Wheel -->
<div class="text-center">
<canvas id="canvas" width="500" height="500"></canvas>
</div>
<hr>
<!-- Insert new values -->
<div class="container col-md-4">
<input type="text" class="form-control" id="inputText" name="inputText" /><br>
<button class="btn btn-block btn-success" onclick="pushData();" type="button">ADD</button>
</div>
This is solution for you issue:
just make following changes in pushData function:
function pushData(){
var inputText = document.getElementById('inputText').value;
options.push(inputText);
drawRouletteWheel();
}
Also, you need to calculate the arc inside the drawRouletteWheel function. since the option element length will change.
arc = Math.PI / (options.length / 2);
var options = ["Winner 1", "Winner 2" , "d"];
var startAngle = 0;
var spinTimeout = null;
var arc = 0;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;
var ctx;
document.getElementById("spin").addEventListener("click", spin);
function pushData(){
var inputText = document.getElementById('inputText').value;
options.push(inputText);
drawRouletteWheel();
}
function byte2Hex(n) {
var nybHexString = "0123456789ABCDEF";
return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
}
function RGB2Color(r,g,b) {
return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
}
function getColor(item, maxitem) {
var phase = 0;
var center = 128;
var width = 127;
var frequency = Math.PI*2/maxitem;
red = Math.sin(frequency*item+2+phase) * width + center;
green = Math.sin(frequency*item+0+phase) * width + center;
blue = Math.sin(frequency*item+4+phase) * width + center;
return RGB2Color(red,green,blue);
}
function drawRouletteWheel() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var outsideRadius = 200;
var textRadius = 160;
var insideRadius = 125;
ctx = canvas.getContext("2d");
ctx.clearRect(0,0,500,500);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.font = 'bold 12px Helvetica, Arial';
//console.log(options.length)
arc = Math.PI / (options.length / 2);
for(var i = 0; i < options.length; i++) {
var angle = startAngle + i * arc;
//ctx.fillStyle = colors[i];
ctx.fillStyle = getColor(i, options.length);
ctx.beginPath();
ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgb(220,220,220)";
ctx.fillStyle = "black";
ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius,
250 + Math.sin(angle + arc / 2) * textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
var text = options[i];
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
ctx.restore();
}
//Arrow
ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
ctx.fill();
}
}
function spin() {
spinAngleStart = Math.random() * 10 + 10;
spinTime = 0;
spinTimeTotal = Math.random() * 3 + 4 * 1000;
rotateWheel();
}
function rotateWheel() {
spinTime += 30;
if(spinTime >= spinTimeTotal) {
stopRotateWheel();
return;
}
var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
startAngle += (spinAngle * Math.PI / 180);
drawRouletteWheel();
spinTimeout = setTimeout('rotateWheel()', 30);
}
function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
ctx.save();
ctx.font = 'bold 30px Helvetica, Arial';
var text = options[index]
ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
ctx.restore();
}
function easeOut(t, b, c, d) {
var ts = (t/=d)*t;
var tc = ts*t;
return b+c*(tc + -3*ts + 3*t);
}
drawRouletteWheel();
<!-- Spin the wheel -->
<div class="container">
<input type="button" class="mt-5 btn btn-lg btn-primary btn-block" value="SPIN THE WHEEL" style="float:left;" id='spin' />
</div>
<!-- The Wheel -->
<div class="text-center">
<canvas id="canvas" width="500" height="500"></canvas>
</div>
<hr>
<!-- Insert new values -->
<div class="container col-md-4">
<input type="text" class="form-control" id="inputText" name="inputText" /><br>
<button class="btn btn-block btn-success" onclick="pushData();" type="button">ADD</button>
</div>
I have this http://jsfiddle.net/e7fwt4wb/! roullete spin in html5 canvas-functioning normally, when I call the method spin the roullete is rotated and stopped in a random number of my array of numbers! How can I call the function passing a parameter to stop at a position of my array of numbers?
<script type="text/javascript">
var colors = ["#336600", "#660000", "#000000", "#660000",
"#000000", "#660000", "#000000", "#660000",
"#000000", "#660000", "#000000", "#660000", "#000000", "#660000", "#000000"];
var numbers = ["0", "1", "8", "2",
"9", "3", "10", "4",
"11", "5", "12", "6", "13", "7", "14"];
var startAngle = 0;
var arc = Math.PI / 6;
var spinTimeout = null;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;
var ctx;
function drawRouletteWheel() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var outsideRadius = 200;
var textRadius = 160;
var insideRadius = 125;
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 500, 500);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.font = 'bold 18px Helvetica, Arial';
for (var i = 0; i < 12; i++) {
var angle = startAngle + i * arc;
ctx.fillStyle = colors[i];
ctx.beginPath();
ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgb(220,220,220)";
ctx.fillStyle = "white";
ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius,
250 + Math.sin(angle + arc / 2) * textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
var text = numbers[i];
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
ctx.restore();
}
//Arrow
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
ctx.fill();
}
}
function spin() {
spinAngleStart = Math.random() * 10 + 10;
spinTime = 0;
spinTimeTotal = Math.random() * 3 + 4 * 1500;
rotateWheel();
}
function rotateWheel() {
spinTime += 30;
if (spinTime >= spinTimeTotal) {
stopRotateWheel();
return;
}
var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
startAngle += (spinAngle * Math.PI / 180);
drawRouletteWheel();
spinTimeout = setTimeout('rotateWheel()', 30);
}
function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
ctx.save();
ctx.font = 'bold 30px Helvetica, Arial';
ctx.textAlign = "center";
var text = numbers[index]
ctx.fillStyle = colors[index];
ctx.fillText("Rolled: " + text, 250 - ctx.measureText(text).width / 2, 250 + 10);
ctx.restore();
}
function easeOut(t, b, c, d) {
var ts = (t /= d) * t;
var tc = ts * t;
return b + c * (tc + -3 * ts + 3 * t);
}
drawRouletteWheel();
</script>
Here's how to spin your wheel and stop at a desired number on the wheel.
To spin your wheel using Penner's Easing equations, you need to define these 4 properties:
The current elapsed time of the animation
The beginning angle of the wheel
The total change in angle required to rotate the wheel to the desired number
The total duration of the animation
Given these 4 properties you can apply one of the easing equations to calculate the wheels angle at any time during the animation:
// t: current time inside duration,
// b: beginning value,
// c: total change from beginning value,
// d: total duration
function easeOutQuart(t, b, c, d){
// return the current eased value based on the current time
return -c * ((t=t/d-1)*t*t*t - 1) + b;
}
For example, assume you want to rotate to the number-9 pocket over a duration of 2 seconds. Then these property values will apply:
Current elapsed time: 800ms (for example),
Beginning angle of the wheel: 0 radians,
Total change in angle required to rotate to number-9: 3.6652 radians
Total duration: 2000ms,
And you can calculate the eased angle of wheel rotation at 800ms like this:
easeOutQuart(800,0,3.6652,2000);
Three of the required Penner properties are "givens" but the total change required to rotate to number-9 is calculated like this:
// "9" is element#4 in numbers[]
var indexOfNumber9 = 4;
// calc what angle each number occupies in the circle
var angleSweepPerNumber = (Math.PI*2) / totalCountOfNumbersOnWheel;
// calc the change in angle required to rotate the wheel to number-9
var endingAngleAt9 = (Math.PI*2) - angleSweepPerNumber * (indexOfNumber9+1);
// the arrow is at the top of the wheel so rotate another -PI/2 (== -90 degrees)
endingAngleAt9 -= Math.PI/2;
// endingAngle is now at the leading edge of the wedge
// so rotate a bit further so the array is clearly inside wedge#9
endingAngleAt9 += Math.random()*angleSweepPerNumber;
Here is example code and a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var colors = ["#336600", "#660000", "#000000", "#660000",
"#000000", "#660000", "#000000", "#660000",
"#000000", "#660000", "#000000", "#660000", "#000000", "#660000", "#000000"];
var numbers = ["0", "1", "8", "2",
"9", "3", "10", "4",
"11", "5", "12", "6", "13", "7", "14"];
var pocketCount=12;
var cheatText=numbers[4];
$('#cheat').text('Stop on '+cheatText);
var cw=canvas.width=ch=canvas.height=500;
var cx=cw/2;
var cy=ch/2;
// wheel & arrow are used often so cache them
var wheelCanvas=drawRouletteWheel();
var arrow=drawArrow();
var wheel={
cx:cw/2,
cy:ch/2,
radius:Math.min(cw,ch)/2-20,
startAngle:0,
endAngle:Math.PI*4+cheatingSpin(cheatText),
totalSteps:360,
currentStep:0,
}
drawAll(wheel);
$('#spin').click(function(){requestAnimationFrame(animate);$(this).hide()});
// funcs
function cheatingSpin(hit){
var PI=Math.PI;
var PI2=PI*2;
var index=numbers.indexOf(cheatText);
var pocketSweep=PI2/pocketCount;
// cheatText not in numbers[]? -- then spin randomly
if(index<0){return(PI2*2+Math.random()*PI2);}
// if cheating, calc random endAngle inside desired number's pocket
return((PI2-pocketSweep*(index+1))+Math.random()*pocketSweep-PI/2);
}
function animate(time){
if(wheel.currentStep>wheel.totalSteps){return;}
drawAll(wheel);
wheel.currentStep++;
requestAnimationFrame(animate);
}
function easing(w){
var t=w.currentStep;
var b=w.startAngle;
var d=w.totalSteps;
var c=w.endAngle-w.startAngle;
// Penner's OutQuart
return (-c*((t=t/d-1)*t*t*t-1)+b+w.startAngle);
}
function drawAll(w){
var angle=easing(w);
ctx.clearRect(0,0,cw,ch);
ctx.translate(cx,cy);
ctx.rotate(angle);
ctx.drawImage(wheelCanvas,-wheelCanvas.width/2,-wheelCanvas.height/2);
ctx.rotate(-angle);
ctx.translate(-cx,-cy);
ctx.drawImage(arrow,cx-arrow.width/2,44);
}
function drawRouletteWheel() {
var outsideRadius = 200;
var textRadius = 160;
var insideRadius = 125;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width=canvas.height=outsideRadius*2+6;
var x=outsideRadius+3;
var y=outsideRadius+3;
var arc = Math.PI / (pocketCount/2);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.font = 'bold 18px Helvetica, Arial';
// wheel
for (var i = 0; i < pocketCount; i++) {
var angle = i * arc;
ctx.fillStyle = colors[i];
ctx.beginPath();
ctx.arc(x,y, outsideRadius, angle, angle + arc, false);
ctx.arc(x,y, insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgb(220,220,220)";
ctx.fillStyle = "white";
ctx.translate(x+Math.cos(angle + arc / 2) * textRadius,
y+Math.sin(angle + arc / 2) * textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
var text = numbers[i];
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
ctx.restore();
}
//
return(canvas);
}
function drawArrow(){
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width=18;
canvas.height=18;
//Arrow
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.moveTo(5,0);
ctx.lineTo(13,0);
ctx.lineTo(13,10);
ctx.lineTo(18,10);
ctx.lineTo(9,18);
ctx.lineTo(0,10);
ctx.lineTo(5,10);
ctx.lineTo(5,0);
ctx.fill();
return(canvas);
}
body{ background-color: ivory; }
#canvas{border:1px solid red; background:lightgray; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id=cheat>Stop on this number</span>
<button id=spin>Spin</button><br>
<canvas id="canvas" width=300 height=300></canvas>
In your code, the stop position is fixed in function spin by setting spinAngleStart and spinTimeTotal.
function spin() {
spinAngleStart = Math.random() * 10 + 10;
spinTime = 0;
spinTimeTotal = Math.random() * 3 + 4 * 1500;
rotateWheel();
}
You should write a function like this pseudo code
function setStopIndex(index) {
// compute and set spinAngleStart and spinTimeTotal according
// to index position
spinAngleStart = ...
spinTimeTotal = ...
spinTime = 0;
}
Then modify spin function like this :
function spin(stopIndex) {
setStopIndex(index) {
rotateWheel();
}
on click, call spin(stopIndex), with the defined index.
I have this http://jsfiddle.net/e7fwt4wb/! roullete spin in html5 canvas-functioning normally, when I call the method spin the roullete is rotated and stopped in a random number of my array of numbers! How can I call the function passing a parameter to stop at a position of my array of numbers?
<script type="text/javascript">
var colors = ["#336600", "#660000", "#000000", "#660000",
"#000000", "#660000", "#000000", "#660000",
"#000000", "#660000", "#000000", "#660000", "#000000", "#660000", "#000000"];
var numbers = ["0", "1", "8", "2",
"9", "3", "10", "4",
"11", "5", "12", "6", "13", "7", "14"];
var startAngle = 0;
var arc = Math.PI / 6;
var spinTimeout = null;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;
var ctx;
function drawRouletteWheel() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var outsideRadius = 200;
var textRadius = 160;
var insideRadius = 125;
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 500, 500);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.font = 'bold 18px Helvetica, Arial';
for (var i = 0; i < 12; i++) {
var angle = startAngle + i * arc;
ctx.fillStyle = colors[i];
ctx.beginPath();
ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgb(220,220,220)";
ctx.fillStyle = "white";
ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius,
250 + Math.sin(angle + arc / 2) * textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
var text = numbers[i];
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
ctx.restore();
}
//Arrow
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
ctx.fill();
}
}
function spin() {
spinAngleStart = Math.random() * 10 + 10;
spinTime = 0;
spinTimeTotal = Math.random() * 3 + 4 * 1500;
rotateWheel();
}
function rotateWheel() {
spinTime += 30;
if (spinTime >= spinTimeTotal) {
stopRotateWheel();
return;
}
var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
startAngle += (spinAngle * Math.PI / 180);
drawRouletteWheel();
spinTimeout = setTimeout('rotateWheel()', 30);
}
function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
ctx.save();
ctx.font = 'bold 30px Helvetica, Arial';
ctx.textAlign = "center";
var text = numbers[index]
ctx.fillStyle = colors[index];
ctx.fillText("Rolled: " + text, 250 - ctx.measureText(text).width / 2, 250 + 10);
ctx.restore();
}
function easeOut(t, b, c, d) {
var ts = (t /= d) * t;
var tc = ts * t;
return b + c * (tc + -3 * ts + 3 * t);
}
drawRouletteWheel();
</script>
Here's how to spin your wheel and stop at a desired number on the wheel.
To spin your wheel using Penner's Easing equations, you need to define these 4 properties:
The current elapsed time of the animation
The beginning angle of the wheel
The total change in angle required to rotate the wheel to the desired number
The total duration of the animation
Given these 4 properties you can apply one of the easing equations to calculate the wheels angle at any time during the animation:
// t: current time inside duration,
// b: beginning value,
// c: total change from beginning value,
// d: total duration
function easeOutQuart(t, b, c, d){
// return the current eased value based on the current time
return -c * ((t=t/d-1)*t*t*t - 1) + b;
}
For example, assume you want to rotate to the number-9 pocket over a duration of 2 seconds. Then these property values will apply:
Current elapsed time: 800ms (for example),
Beginning angle of the wheel: 0 radians,
Total change in angle required to rotate to number-9: 3.6652 radians
Total duration: 2000ms,
And you can calculate the eased angle of wheel rotation at 800ms like this:
easeOutQuart(800,0,3.6652,2000);
Three of the required Penner properties are "givens" but the total change required to rotate to number-9 is calculated like this:
// "9" is element#4 in numbers[]
var indexOfNumber9 = 4;
// calc what angle each number occupies in the circle
var angleSweepPerNumber = (Math.PI*2) / totalCountOfNumbersOnWheel;
// calc the change in angle required to rotate the wheel to number-9
var endingAngleAt9 = (Math.PI*2) - angleSweepPerNumber * (indexOfNumber9+1);
// the arrow is at the top of the wheel so rotate another -PI/2 (== -90 degrees)
endingAngleAt9 -= Math.PI/2;
// endingAngle is now at the leading edge of the wedge
// so rotate a bit further so the array is clearly inside wedge#9
endingAngleAt9 += Math.random()*angleSweepPerNumber;
Here is example code and a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var colors = ["#336600", "#660000", "#000000", "#660000",
"#000000", "#660000", "#000000", "#660000",
"#000000", "#660000", "#000000", "#660000", "#000000", "#660000", "#000000"];
var numbers = ["0", "1", "8", "2",
"9", "3", "10", "4",
"11", "5", "12", "6", "13", "7", "14"];
var pocketCount=12;
var cheatText=numbers[4];
$('#cheat').text('Stop on '+cheatText);
var cw=canvas.width=ch=canvas.height=500;
var cx=cw/2;
var cy=ch/2;
// wheel & arrow are used often so cache them
var wheelCanvas=drawRouletteWheel();
var arrow=drawArrow();
var wheel={
cx:cw/2,
cy:ch/2,
radius:Math.min(cw,ch)/2-20,
startAngle:0,
endAngle:Math.PI*4+cheatingSpin(cheatText),
totalSteps:360,
currentStep:0,
}
drawAll(wheel);
$('#spin').click(function(){requestAnimationFrame(animate);$(this).hide()});
// funcs
function cheatingSpin(hit){
var PI=Math.PI;
var PI2=PI*2;
var index=numbers.indexOf(cheatText);
var pocketSweep=PI2/pocketCount;
// cheatText not in numbers[]? -- then spin randomly
if(index<0){return(PI2*2+Math.random()*PI2);}
// if cheating, calc random endAngle inside desired number's pocket
return((PI2-pocketSweep*(index+1))+Math.random()*pocketSweep-PI/2);
}
function animate(time){
if(wheel.currentStep>wheel.totalSteps){return;}
drawAll(wheel);
wheel.currentStep++;
requestAnimationFrame(animate);
}
function easing(w){
var t=w.currentStep;
var b=w.startAngle;
var d=w.totalSteps;
var c=w.endAngle-w.startAngle;
// Penner's OutQuart
return (-c*((t=t/d-1)*t*t*t-1)+b+w.startAngle);
}
function drawAll(w){
var angle=easing(w);
ctx.clearRect(0,0,cw,ch);
ctx.translate(cx,cy);
ctx.rotate(angle);
ctx.drawImage(wheelCanvas,-wheelCanvas.width/2,-wheelCanvas.height/2);
ctx.rotate(-angle);
ctx.translate(-cx,-cy);
ctx.drawImage(arrow,cx-arrow.width/2,44);
}
function drawRouletteWheel() {
var outsideRadius = 200;
var textRadius = 160;
var insideRadius = 125;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width=canvas.height=outsideRadius*2+6;
var x=outsideRadius+3;
var y=outsideRadius+3;
var arc = Math.PI / (pocketCount/2);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.font = 'bold 18px Helvetica, Arial';
// wheel
for (var i = 0; i < pocketCount; i++) {
var angle = i * arc;
ctx.fillStyle = colors[i];
ctx.beginPath();
ctx.arc(x,y, outsideRadius, angle, angle + arc, false);
ctx.arc(x,y, insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgb(220,220,220)";
ctx.fillStyle = "white";
ctx.translate(x+Math.cos(angle + arc / 2) * textRadius,
y+Math.sin(angle + arc / 2) * textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
var text = numbers[i];
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
ctx.restore();
}
//
return(canvas);
}
function drawArrow(){
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width=18;
canvas.height=18;
//Arrow
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.moveTo(5,0);
ctx.lineTo(13,0);
ctx.lineTo(13,10);
ctx.lineTo(18,10);
ctx.lineTo(9,18);
ctx.lineTo(0,10);
ctx.lineTo(5,10);
ctx.lineTo(5,0);
ctx.fill();
return(canvas);
}
body{ background-color: ivory; }
#canvas{border:1px solid red; background:lightgray; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id=cheat>Stop on this number</span>
<button id=spin>Spin</button><br>
<canvas id="canvas" width=300 height=300></canvas>
In your code, the stop position is fixed in function spin by setting spinAngleStart and spinTimeTotal.
function spin() {
spinAngleStart = Math.random() * 10 + 10;
spinTime = 0;
spinTimeTotal = Math.random() * 3 + 4 * 1500;
rotateWheel();
}
You should write a function like this pseudo code
function setStopIndex(index) {
// compute and set spinAngleStart and spinTimeTotal according
// to index position
spinAngleStart = ...
spinTimeTotal = ...
spinTime = 0;
}
Then modify spin function like this :
function spin(stopIndex) {
setStopIndex(index) {
rotateWheel();
}
on click, call spin(stopIndex), with the defined index.
I am using this spin wheel
http://tpstatic.com/_sotc/sites/default/files/1010/source/roulettewheel.html
I want to change the background color to background images. I don't have a clue how to do it. If someone is kind enough to show me the path of adding images to canvas shapes /elements. I know it has something to do with fillStyle(). Here is the code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1252">
</head>
<body>
<input type="button" value="spin" onclick="spin();" style="float: left;">
<canvas id="wheelcanvas" width="600" height="600"></canvas>
<script type="application/javascript">
var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",
"#2E2C75", "#673A7E", "#CC0071", "#F80120",
"#F35B20", "#FB9A00", "#FFCC00", "#FEF200","#FEF200"];
var restaraunts = ["$10", "$20", "$30", "$40",
"$50", "$60", "$70", "$80",
"$90", "$100", "$120", "$150","HELLO"];
var startAngle = 0;
var arc = Math.PI / 6;
var spinTimeout = null;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;
var ctx;
function draw() {
drawRouletteWheel();
}
function drawRouletteWheel() {
var canvas = document.getElementById("wheelcanvas");
if (canvas.getContext) {
var outsideRadius = 200;
var textRadius = 160;
var insideRadius = 125;
ctx = canvas.getContext("2d");
ctx.clearRect(0,0,600,600);
ctx.strokeStyle = "green";
ctx.lineWidth = 1;
ctx.font = 'bold 14px sans-serif';
for(var i = 0; i < 14; i++) {
var angle = startAngle + i * arc;
ctx.fillStyle = colors[i];
ctx.beginPath();
ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgb(220,220,220)";
ctx.fillStyle = "black";
ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
var text = restaraunts[i];
ctx.fillText(text, -ctx.measureText(text).width /2, 2);
ctx.restore();
}
//Arrow
ctx.fillStyle = "green";
ctx.beginPath();
ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
ctx.fill();
}
}
function spin() {
spinAngleStart = Math.random() * 10 + 10;
spinTime = 0;
spinTimeTotal = Math.random() * 3 + 4 * 1000;
rotateWheel();
}
function rotateWheel() {
spinTime += 30;
if(spinTime >= spinTimeTotal) {
stopRotateWheel();
return;
}
var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
startAngle += (spinAngle * Math.PI / 180);
drawRouletteWheel();
spinTimeout = setTimeout('rotateWheel()', 30);
}
function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
ctx.save();
ctx.font = 'bold 30px sans-serif';
var text = restaraunts[index]
ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
ctx.restore();
}
function easeOut(t, b, c, d) {
var ts = (t/=d)*t;
var tc = ts*t;
return b+c*(tc + -3*ts + 3*t);
}
draw();
</script>
</body>
</html>
Here is the preview of an empty spin wheel. I want to put different images on each of them.
You can use context.pattern to create a pattern with which to fill your wheel:
var pattern1,pattern2;
var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",
"#2E2C75", "#673A7E", "#CC0071", "#F80120",
"#F35B20", "#FB9A00", "#FFCC00", "#FEF200","#FEF200"];
var restaraunts = ["$10", "$20", "$30", "$40",
"$50", "$60", "$70", "$80",
"$90", "$100", "$120", "$150","HELLO"];
var startAngle = 0;
var arc = Math.PI / 6;
var spinTimeout = null;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;
var canvas = document.getElementById("wheelcanvas");
var ctx = canvas.getContext("2d");
var img1=new Image();
img1.onload=start;
img1.src="https://dl.dropboxusercontent.com/u/139992952/multple/mm.jpg";
var img2=new Image();
img2.onload=start;
img2.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/water1.jpg";
var imgCount=2;
function start(){
if(--imgCount>0){return;}
pattern1=ctx.createPattern(img1,'repeat');
pattern2=ctx.createPattern(img2,'repeat');
draw();
}
function draw() {
drawRouletteWheel();
}
function drawRouletteWheel() {
var outsideRadius = 200;
var textRadius = 160;
var insideRadius = 125;
ctx.clearRect(0,0,600,600);
ctx.strokeStyle = "green";
ctx.lineWidth = 1;
ctx.font = 'bold 14px sans-serif';
for(var i = 0; i < 14; i++) {
var angle = startAngle + i * arc;
ctx.fillStyle = (i/2==parseInt(i/2))?pattern1:pattern2; //colors[i];
ctx.beginPath();
ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgb(220,220,220)";
ctx.fillStyle = "black";
ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
var text = restaraunts[i];
ctx.fillText(text, -ctx.measureText(text).width /2, 2);
ctx.restore();
}
//Arrow
ctx.fillStyle = "green";
ctx.beginPath();
ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
ctx.fill();
}
function spin() {
spinAngleStart = Math.random() * 10 + 10;
spinTime = 0;
spinTimeTotal = Math.random() * 3 + 4 * 1000;
rotateWheel();
}
function rotateWheel() {
spinTime += 30;
if(spinTime >= spinTimeTotal) {
stopRotateWheel();
return;
}
var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
startAngle += (spinAngle * Math.PI / 180);
drawRouletteWheel();
spinTimeout = setTimeout('rotateWheel()', 30);
}
function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
ctx.save();
ctx.font = 'bold 30px sans-serif';
var text = restaraunts[index]
ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
ctx.restore();
}
function easeOut(t, b, c, d) {
var ts = (t/=d)*t;
var tc = ts*t;
return b+c*(tc + -3*ts + 3*t);
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<canvas id="wheelcanvas" width=600 height=600></canvas>
I just wanted to make a roulette for fun and own experience and I'm far from being a JS master so..
Here is a ready code i found:
var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",
"#2E2C75", "#673A7E", "#CC0071", "#F80120",
"#F35B20", "#FB9A00", "#FFCC00", "#FEF200"];
var restaraunts = ["Wendy's", "McDonalds", "Chick-fil-a", "Five Guys",
"Gold Star", "La Mexicana", "Chipotle", "Tazza Mia",
"Panera", "Just Crepes", "Arby's", "Indian"];
var startAngle = 0;
var arc = Math.PI / 6;
var spinTimeout = null;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;
var ctx;
function drawRouletteWheel() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var outsideRadius = 200;
var textRadius = 160;
var insideRadius = 125;
ctx = canvas.getContext("2d");
ctx.clearRect(0,0,500,500);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.font = 'bold 12px Helvetica, Arial';
for(var i = 0; i < 12; i++) {
var angle = startAngle + i * arc;
ctx.fillStyle = colors[i];
ctx.beginPath();
ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgb(220,220,220)";
ctx.fillStyle = "black";
ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius,
250 + Math.sin(angle + arc / 2) * textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
var text = restaraunts[i];
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
ctx.restore();
}
//Arrow
ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
ctx.fill();
}
}
function spin() {
spinAngleStart = Math.random() * 10 + 10;
spinTime = 0;
spinTimeTotal = Math.random() * 3 + 4 * 1000;
rotateWheel();
}
function rotateWheel() {
spinTime += 30;
if(spinTime >= spinTimeTotal) {
stopRotateWheel();
return;
}
var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
startAngle += (spinAngle * Math.PI / 180);
drawRouletteWheel();
spinTimeout = setTimeout('rotateWheel()', 30);
}
function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
ctx.save();
ctx.font = 'bold 30px Helvetica, Arial';
var text = "You won\n" + restaraunts[index]
ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
ctx.restore();
}
function easeOut(t, b, c, d) {
var ts = (t/=d)*t;
var tc = ts*t;
return b+c*(tc + -3*ts + 3*t);
}
drawRouletteWheel();
I'm wondering how can i change the background colors to background images and to add images to restaraunts, and also the \n signs are not making new lines on var text = "You won\n" + restaraunts[index].
I know these are really basic questions but again - I'm not so much familiar with JS so if someone could help it can be cool ;)
You can use setSyle to set the backround-image property instead of background-color, and use <br /> instead of \n for new lines.
Update: Again, the text is drawn on a canvas. To get a new line, you could do something like this, since \n doesn't seem to do much:
ctx.fillText("You won!", -ctx.measureText(text).width / 2, 0);
ctx.fillText(text, -ctx.measureText(text).width / 2, 12);
Update 2: I found how to draw images to the canvas, and there are settings to get a rectangular portion of the image, but I don't know how to mask an image with a polygon shape that isn't a rectangle yet:
function drawImage() {
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function () {
ctx.drawImage(img,0,0);
};
img.src="panera.jpg";
}
The code you provided is only javascript. You need to have some html and css to show content and to style it. When you have html you can change background of html element, <div class="myClass"></div> for example with this css:
.myClass
{
background-color:yellow;
}
or to have image as background:
.myClass
{
background-image:url('paper.gif');
}
and yes, use <br/> as a line break in browsers.