Rueda de Bici en Javascript+ js – Wheel on js – code

<button id=“spin”>spin</button>

<div>

<canvas id=“canvas” width=“500” height=“500”></canvas>

</div>

var colors = [“#eaeaea”, “#cccccc”, “#eaeaea”, “#cccccc”,

                           "#eaeaea", “#cccccc”, “#eaeaea”, “#cccccc”,“#eaeaea”, “#cccccc”, “#eaeaea”, “#cccccc”,

                           "#eaeaea", “#cccccc”, “#eaeaea”, “#cccccc”,“#eaeaea”, “#cccccc”, “#eaeaea”, “#cccccc”,

                           "#eaeaea", “#cccccc”, “#eaeaea”, “#cccccc”,“#eaeaea”, “#cccccc”, “#eaeaea”, “#cccccc”,

                           "#eaeaea", “#cccccc”, “#eaeaea”, “#cccccc”,“#eaeaea”, “#cccccc”, “#cccccc”];

// NEED to pre load this data prior

//var prize_descriptions = [“ipod”, “race car”, “something”,                                      "clown", “BMW m3”, “million $”];

var current_user_status = {};

var startAngle = 0;

var arc = Math.PI / 10;

var spinTimeout = null;

var spinArcStart = 0;

var spinTime = 0;

var spinTimeTotal = 0;

var current_user_status = null;

var spin_results = null;

var ctx;

function drawSpinnerWheel() {

    var canvas = document.getElementById(“canvas”);

    if (canvas.getContext) {

        var outsideRadius = 200;

        var textRadius = 160;

        var insideRadius = 10;

        ctx = canvas.getContext(“2d”);

        ctx.clearRect(0, 0, 700, 700);

        ctx.shadowColor=“black”;

        ctx.shadowBlur = 5;    

        ctx.strokeStyle = “#f3d769”;

        ctx.lineWidth = 5;

         ctx.font = ‘bold 12px Helvetica, Arial’;

        for (var i = 0; i < 80; 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.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);

            ctx.rotate(angle + arc / 2 + Math.PI / 2);

            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 – 200));

        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 = 1 * 10 + 10;

    spinTime = 0;

    spinTimeTotal = 2 * 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);

    drawSpinnerWheel();

    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 = prize_descriptions[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);

}

drawSpinnerWheel();

$(“#spin”).bind(‘click’, function(e) {

    e.preventDefault();

    spin();

});

Leave a Reply

Your email address will not be published.