0

JSFiddle Link: http://jsfiddle.net/lustre/970tf041/6/

I didn't create this code, but the blog which it was created from isn't working at the moment...

Basically, I'm looking for a way to include an image (https://i.stack.imgur.com/y5uJf.png) behind the spinner text, which spins with the spinner when it spins. This is my first foray into canvas' so I'm a bit lost as to where it could be added.

The code below used to colour the background of each segment with a random colour, but now it just makes each segment transparent.

function genHex(){
    colorCache.push('transparent');
    return 'transparent';    
}

Here's the original in case it's useful:

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;
        }
    }

I'm really at a loss as to where it could possibly go... The spinners speed is randomised every time it spins, and I'd like the image to match that spin (even if it has to be slowed down).

I assume the code would need to go into the drawWheel() function, but I have no idea how to include it.

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();
    }

Thank you for your time :)

Natalie
  • 546
  • 10
  • 21

1 Answers1

2

See for example HTML5 Canvas Rotate Image for explanation of image rotation on canvas

The rotated image can be displayed by the following code in the function drawWheel() after ctx.clearRect(0,0,500,500):

var img = document.getElementById("img1");
ctx.save();
ctx.translate(250, 250);
ctx.rotate(startAngle);
ctx.drawImage(img, -params.outterRadius, -params.outterRadius,
              2 * params.outterRadius, 2 * params.outterRadius);
ctx.restore();

The image size is adjusted to 2 * params.outterRadius.

Working example: http://jsfiddle.net/0npc395n/1/

Community
  • 1
  • 1
Orest Hera
  • 6,706
  • 2
  • 21
  • 35