加載時不顯示畫布圖像

這裏我正在嘗試使用多個弧形來製作圓。像下面：加載時不顯示畫布圖像

var startAngle = 0; 
 
var arc = Math.PI/6; 
 
var ctx; 
 

 
var leftValue=275; 
 
var topValue=300; \t 
 
\t  
 
var wheelImg = "http://i.stack.imgur.com/wwXlF.png"; 
 

 
function drawWheelImg() 
 
{ 
 
\t var canvas = document.getElementById("canvas"); 
 
    \t if(canvas.getContext) 
 
\t { 
 
\t \t var outsideRadius = 260; 
 
\t \t var textRadius = 217; 
 
\t \t var insideRadius = 202; 
 

 
\t \t ctx = canvas.getContext("2d"); \t 
 

 
\t \t for(var i = 0; i < 12; i++) 
 
\t \t { 
 
\t \t \t var angle = startAngle + i * arc; 
 

 
\t \t \t ctx.beginPath(); 
 
\t \t \t ctx.arc(leftValue, topValue, outsideRadius, angle, angle + arc, false); 
 
\t \t \t ctx.arc(leftValue, topValue, insideRadius, angle + arc, angle, true); 
 
\t \t \t ctx.fill(); 
 
\t \t \t ctx.closePath(); 
 
\t \t \t ctx.beginPath(); 
 
\t \t \t ctx.arc(leftValue, topValue, outsideRadius, angle, angle + arc, false); 
 
\t \t \t ctx.shadowBlur=3; 
 
\t \t \t ctx.shadowColor="#A47C15"; 
 
\t \t \t ctx.stroke(); 
 
\t \t \t ctx.closePath(); 
 
\t \t \t 
 
\t \t \t ctx.save(); 
 
\t \t \t ctx.translate(leftValue + Math.cos(angle + arc/2) * textRadius, 
 
\t \t \t \t \t \t topValue + Math.sin(angle + arc/2) * textRadius); 
 
\t \t \t ctx.rotate(angle + arc/2 + Math.PI/2); 
 
\t \t \t var imgName = wheelImg; 
 
\t \t \t var img = new Image(); 
 
\t \t \t 
 
\t \t \t img.src = wheelImg; 
 
\t \t \t ctx.drawImage(img,-44, -25,50,40); 
 
\t \t \t ctx.restore(); 
 
\t \t } 
 
    \t } 
 
} \t 
 

 

 

 
function spin() 
 
{ 
 
\t drawWheelImg(); 
 
} 
 

 
drawWheelImg();

<button class="btnSpin" onclick="spin();">Spin</button> 
 

 
<canvas id="canvas" width="550" height="580"></canvas>

問題：

現在的問題是，當頁面加載我叫其繪製圓用弧到弧繪製圖像的功能。但那不起作用。

如果我在按鈕上點擊相同的功能，那麼它可以工作並顯示圖像。

我發現很多，但沒有得到解決方案。不知道爲什麼圖像不顯示在加載。

任何幫助將不勝感激。

來源

2015-12-23 ketan

任何控制檯錯誤，在瀏覽器的代碼？ – Lal

您是否使用$（window）.ready或onload事件調用函數？ – Will

您必須等待圖像加載，然後才能渲染它。使用'image.onload'獲取圖片加載時的狀態，或者檢查'image.complete' – Blindman67

這裏的要點是，你必須等到圖像被加載後才能真正繪製它。

爲了讓代碼正常工作，我最好的選擇是將所有畫布繪製到一個image.onload函數中，因爲通過這種方式，您可以確定一旦開始真正繪製它就會渲染它。

我後你在工作Plunkr

var startAngle = 0; 
 
var arc = Math.PI/6; 
 
var ctx; 
 

 
var leftValue = 275; 
 
var topValue = 300; 
 

 
var wheelImg = "http://i.stack.imgur.com/wwXlF.png"; 
 

 
function drawWheelImg() { 
 
    var canvas = document.getElementById("canvas"); 
 
    if (canvas.getContext) { 
 
     var imgName = wheelImg; 
 
     var img = new Image(); 
 
     img.src = wheelImg; 
 

 
     img.onload = function() { 
 
      var outsideRadius = 260; 
 
      var textRadius = 217; 
 
      var insideRadius = 202; 
 

 
      ctx = canvas.getContext("2d"); 
 

 
      for (var i = 0; i < 12; i++) { 
 
       var angle = startAngle + i * arc; 
 

 
       ctx.beginPath(); 
 
       ctx.arc(leftValue, topValue, outsideRadius, angle, angle + arc, false); 
 
       ctx.arc(leftValue, topValue, insideRadius, angle + arc, angle, true); 
 
       ctx.fill(); 
 
       ctx.closePath(); 
 
       ctx.beginPath(); 
 
       ctx.arc(leftValue, topValue, outsideRadius, angle, angle + arc, false); 
 
       ctx.shadowBlur = 3; 
 
       ctx.shadowColor = "#A47C15"; 
 
       ctx.stroke(); 
 
       ctx.closePath(); 
 

 
       ctx.save(); 
 
       ctx.translate(leftValue + Math.cos(angle + arc/2) * textRadius, 
 
        topValue + Math.sin(angle + arc/2) * textRadius); 
 
       ctx.rotate(angle + arc/2 + Math.PI/2); 
 
       ctx.drawImage(img, -44, -25, 50, 40); 
 
       ctx.restore(); 
 
      } 
 
     } 
 
    } 
 
} 
 

 
drawWheelImg();

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    </head> 
 

 
    <body> 
 
    <canvas id="canvas" width="550" height="400"></canvas> 
 
    <script src="script.js"></script> 
 
    </body> 
 

 
</html>

來源

2015-12-23 18:50:06

我認爲這會起作用。我會執行並讓你知道。 – ketan

讓我知道@ketan –

加載時不顯示畫布圖像

回答

相關問題