添加一個背景圖像的HTML5畫布旋轉

的jsfiddle鏈接：http://jsfiddle.net/lustre/970tf041/6/添加一個背景圖像的HTML5畫布旋轉

我沒有創建這個代碼，但它是從創建的博客是不是做什麼工作的？

基本上，我正在尋找一種方法，將圖像（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(); 
    }

感謝您的時間:)

來源

2015-11-13 Natalie

見例如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/

來源

2015-11-13 18:27:43

太棒了！感謝您的幫助Orest :) – Natalie

添加一個背景圖像的HTML5畫布旋轉

回答

相關問題