Question

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

我没有创建这个代码，但是它创建的博客目前还没有工作......

基本上，我正在寻找一种在微调器文本后面包含图像（http://i.imgur.com/7IBiiOW.png）的方法，它在旋转时与旋转器一起旋转。这是我第一次涉足帆布＆＃39;所以我对它的添加位置感到有点迷失。

下面的代码用于使用随机颜色为每个片段的背景着色，但现在它只是使每个片段透明。

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

以下是原件，如果它有用：

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

我真的不知道它可能会去哪里......每次旋转时，旋转器的速度都是随机的，我希望图像与旋转相匹配（即使它有放慢速度。）

我认为代码需要进入drawWheel()函数，但我不知道如何包含它。

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

感谢您的时间：）

Answer 1

有关画布上图像旋转的说明，请参阅示例HTML5 Canvas Rotate Image

在drawWheel()后的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();

图像尺寸调整为2 * params.outterRadius。

工作示例：http://jsfiddle.net/0npc395n/1/

将背景图像添加到HTML5 Canvas微调器

1 个答案: