添加一个背景图像的HTML5画布旋转

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 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/