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 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>
is there any way to create a circle div with dividers/segments using jquery?
basically, somehting like this: jsfiddle
/*
* This jquery plugin is based on this blogpost - http://www.switchonthecode.com/tutorials/creating-a-roulette-wheel-using-html5-canvas
* If you want to know more how it works, please refer to the above tutorial.
*
* #author Roy Yu | iroy2000 [at] gmail.com ( modify, repackage and add new features )
* #description: This jquery plugin will create a spin wheel and let you to add players at run time.
*
*/
(function($){
$.fn.spinwheel = function(options, callback){
var params = $.extend({},$.fn.spinwheel.default_options, options), $that = $(this), ctx = null, colorCache = [],
startAngle = 0, arc = Math.PI / 6, spinTimeout = null, spinArcStart = 10, spinTime = 0, spinTimeTotal = 0, spinAngleStart = 0, pplArray = params.pplArray, pplLength = pplArray.length;
if($.isFunction(options)){
callback = options;
options = {};
}
var methods = {
init: function() {
methods.getContext();
methods.setup();
drawWheel();
},
setup: function() {
$(params.spinTrigger).bind('click', function(e){
e.preventDefault();
methods.spin();
});
$(params.addPplTrigger).bind('click', function(e){
e.preventDefault();
var item = $('<li />').append($(params.joiner).val());
$(params.paricipants).append(item);
methods.updatePanel();
});
},
getContext: function() {
if(ctx !== null)
return ctx;
var canvas = $that[0];
ctx = canvas.getContext("2d");
},
spin: function() {
spinAngleStart = Math.random() * 10 + 10;
spinTime = 0;
spinTimeTotal = Math.random() * 3 + 4 * 1000;
rotateWheel();
},
updatePanel: function() {
var $ppl = $(params.paricipants).children();
pplArray = [];
$ppl.each(function(key, value){
pplArray.push(value.innerHTML);
});
arc = 2 * Math.PI / $ppl.length;
pplLength = $ppl.length;
drawWheel();
}
}
function genHex(){
var colors=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"], color = "", digit = [], i;
for (i=0;i<6;i++){
digit[i]=colors[Math.round(Math.random()*14)];
color = color+digit[i];
}
if($.inArray(color, colorCache) > -1){
genHex();
} else {
colorCache.push('#'+color);
return '#'+color;
}
}
var rotateWheel = function rotateWheel() {
spinTime += 30;
if(spinTime >= spinTimeTotal) {
stopRotateWheel();
return;
}
var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
startAngle += (spinAngle * Math.PI / 180);
drawWheel();
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 = params.resultTextFont;
var text = pplArray[index];
$(params.winnerDiv).html(text).show();
//ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
ctx.restore();
}
function drawArrow() {
ctx.fillStyle = params.arrowColor;
ctx.beginPath();
ctx.moveTo(250 - 4, 250 - (params.outterRadius + 15));
ctx.lineTo(250 + 4, 250 - (params.outterRadius + 15));
ctx.lineTo(250 + 4, 250 - (params.outterRadius - 15));
ctx.lineTo(250 + 9, 250 - (params.outterRadius - 15));
ctx.lineTo(250 + 0, 250 - (params.outterRadius - 23));
ctx.lineTo(250 - 9, 250 - (params.outterRadius - 15));
ctx.lineTo(250 - 4, 250 - (params.outterRadius - 15));
ctx.lineTo(250 - 4, 250 - (params.outterRadius + 15));
ctx.fill();
}
function drawWheel() {
ctx.strokeStyle = params.wheelBorderColor;
ctx.lineWidth = params.wheelBorderWidth;
ctx.font = params.wheelTextFont;
ctx.clearRect(0,0,500,500);
var text = null, i = 0, totalJoiner = pplLength;
for(i = 0; i < totalJoiner; i++) {
text = pplArray[i];
var angle = startAngle + i * arc;
ctx.fillStyle = colorCache.length > totalJoiner ? colorCache[i] : genHex();
ctx.beginPath();
// ** arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);
ctx.arc(250, 250, params.outterRadius, angle, angle + arc, false);
ctx.arc(250, 250, params.innerRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 1;
ctx.shadowColor = params.wheelTextShadowColor;
ctx.fillStyle = params.wheelTextColor;
ctx.translate(250 + Math.cos(angle + arc / 2) * params.textRadius, 250 + Math.sin(angle + arc / 2) * params.textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
ctx.restore();
ctx.closePath();
}
drawArrow();
}
function easeOut(t, b, c, d) {
var ts = (t/=d)*t;
var tc = ts*t;
return b+c*(tc + -3*ts + 3*t);
}
methods.init.apply(this,[]);
}
/* --- please look at the index.html source in order to understand what they do ---
* outterRadius : the big circle border
* innerRadius : the inner circle border
* textRadius : How far the the text on the wheel locate from the center point
* spinTrigger : the element that trigger the spin action
* wheelBorderColor : what is the wheel border color
* wheelBorderWidth : what is the "thickness" of the border of the wheel
* wheelTextFont : what is the style of the text on the wheel
* wheelTextColor : what is the color of the tet on the wheel
* wheelTextShadow : what is the shadow for the text on the wheel
* resultTextFont : it is not being used currently
* arrowColor : what is the color of the arrow on the top
* participants : what is the container for participants for the wheel
* joiner : usually a form input where user can put in their name
* addPplTrigger : what element will trigger the add participant
* winDiv : the element you want to display the winner
*/
$.fn.spinwheel.default_options = {
outterRadius:200, innerRadius:3, textRadius: 160, spinTrigger: '.spin-trigger',
wheelBorderColor: 'black',wheelBorderWidth : 3, wheelTextFont : 'bold 15px sans-serif', wheelTextColor: 'black', wheelTextShadowColor : 'rgb(220,220,220)',
resultTextFont : 'bold 30px sans-serif', arrowColor :'black', paricipants:'.participants', addPplTrigger:'.add', joiner:'.joiner', winnerDiv:'.winner'
}
})(jQuery);
$(document).ready(function(){
$('.canvas').spinwheel({
pplArray : ["♈", "♉", "♊", "♋","♌", "♍", "♎", "♏","♐", "♑", "♒", "♓"]
});
});
#main {
width:1000px;
}
#left-column {
float:left;
width:600px;
padding-right:15px;
}
#right-column {
float:right;
width:300px;
}
.participants {
list-style:none;
}
.participants li {
border-radius:15px;
padding:15px;
font-family: 'Carter One', arial, serif;
font-size:150%;
text-shadow: 2px 2px 2px #000;
}
.participants li:nth-child(2n+1) {
background-color:#bada55;
}
.winner {
font-family: 'Carter One', arial, serif;
font-size:250%;
text-shadow: 2px 2px 2px #000;
display:none;
}
.winner:before {
content: "The Winner is ... "
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id="main">
<div id="left-column">
<form class="iform" action="#" method="get">
<label for="joiner"></label>
<input id="joiner" name="joiner" class="joiner" placeholder="Please Enter your name" />
<button class="add">Add</button>
<button class="spin-trigger">Spin</button>
</form>
<canvas class="canvas" width="500" height="500"></canvas>
</div>
<div id="right-column">
<p class="winner">The Winner is ... <span> </span></p>
<ul class="participants">
</ul>
</div>
<div style="clear:both"></div>
</div>
I can use the code above but it is HTML5 and I'm trying to keep clear of the HTML5 in my project so it would be great to do this using Jquery as it will give me more freedom in terms of using external images and I wont have to fiddle about with canvas and all that in html5.
I just need to create a the circle div and divide based on the users input and let the users to choose the background colour on each segment>
I did try this with the code above in jsfiddle and I can let the user to even choose the background colour of the segment but there are some bugs which led me to think its best to use jquery.
example based on the code in jsfiddle above:
for (i=0;i<1;i++){
digit[i]=colors[Math.round(Math.random()*1)];
//color = color+digit[i];
color = document.getElementById("colour").value;
//color = color+digit[i];
}
any advise would be greatly appreciated.
EDIT:
I am trying to modify the code bellow.
basically, what i am trying to do is to let the users to choose the colours of segments.
this is the original jsfiddle: http://jsfiddle.net/kYvzd/118/light/
so what i've done so far is this:
edited the HTML and added this to it:
<select id="colour" name="colour" class="colour">
<option value=""></option>
<option value="db0000">Red</option>
<option value="171515">Black</option>
<option value="008c0a">Green</option>
</select>
edited the javascript and added this:
for (i=0;i<1;i++){
digit[i]=colors[Math.round(Math.random()*1)];
//color = color+digit[i];
color = document.getElementById("colour").value;
//color = color+digit[i];
}
the issue that I am facing right now is very strange.
basically with my edit, it will add the segments but it doesn't add the colours properly! it will add the 1st segment with its colour properly, it will add the 2nd segment with its colour properly too and the issue starts from adding the third segment... it will add the segment but it will not add the colour properly! it will jump back to the previous background colour for the previous segment!
could someone please advise on this issue?
This library looks pretty good:
http://www.openstudio.fr/lab/Library-for-simple-drawing-with.html?lang=fr
$("#example3").fillArc(0, 0, 100, 45, 260, {color: '#ffa500'})
.fillArc(0, 0, 100, 260, 310, {color: '#00c7ee'})
.fillArc(0, 0, 100, 310, 45, {color: '#46aa08'});
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.