將背景圖像添加到HTML5 Canvas微調器

Question

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

我沒有創建此代碼，但是創建它的博客目前無法正常工作...

基本上，我正在尋找一種在微調器文本后面包含圖像（ http://i.imgur.com/7IBiiOW.png ）的方法，該圖像在微調器旋轉時隨之旋轉。 這是我第一次涉足畫布設計，因此我對可以添加的位置有些迷惑。

下面的代碼曾經使用隨機顏色為每個片段的背景着色，但是現在它只是使每個片段透明。

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畫布旋轉圖像，以了解畫布上圖像旋轉的說明

旋轉的圖像可以通過在函數下面的代碼來顯示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/