分層畫布做背景

Question

在其他Stack Overflow成員的幫助下。我創建了一個我正在構建的網站的動畫畫布部分。

我很新的畫布，我想要做的是有一個動畫圓弧/圓

function animate(elementId, endPercent) { 
    var canvas = document.getElementById(elementId); 
    var context = canvas.getContext('2d'); 
    var x = canvas.width/2; 
    var y = canvas.height/2; 
    var radius = 43.5; 
    var curPerc = 0; 
    var counterClockwise = false; 
    var circ = Math.PI * 2; 
    var quart = Math.PI/2; 

    context.lineWidth = 9; 
    context.strokeStyle = '#c51414'; 
    context.lineCap = 'butt'; 

    context.shadowOffsetX = 1; 
    context.shadowOffsetY = 1; 
    context.shadowBlur = 1; 
    context.shadowColor = "#c51414"; 


    function render(current) { 
     context.clearRect(0, 0, canvas.width, canvas.height); 
     context.beginPath(); 
     context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false); 
     context.stroke(); 
     curPerc++; 
     if (curPerc <= endPercent) { 
      requestAnimationFrame(function() { 
       render(curPerc/100); 
      }); 
     } 
    } 
    render(); 
} 

animate('skill1', 90); 
animate('skill2', 80); 
animate('skill3', 45); 
animate('skill4', 92); 
animate('skill5', 80); 
animate('skill6', 65); 

這裏是我使用的時刻腳本。在底部它使用

animate('skill3', 45); 

最後45是電弧行進百分比。 這裏是一個小提琴，使它更容易看到。

http://jsfiddle.net/dLAVe/

我想還是用帆布做的，給每個弧完整的背景圓圈。 這裏是我想要達到的圖像，（我在Photoshop這樣做）

我不想使用圖像，並將其放置在圓弧的下面，我已經已經嘗試過在畫布上放置背景圖片，但我確實是關於對齊方式的肛門，它的字面上微像素不同於將背景與動畫弧對齊。另外我想用Canvas來做。

任何人都可以幫我一把小提琴怎麼做？我想它會在靜態圓圈的頂部放置動畫弧線。

請幫忙，因爲這讓我瘋狂！

Answer 1

嘛，這更是一個CSS問題，如分層畫布只是確保他們是對彼此的頂部。 簡單的解決辦法是建立一個背景畫布（稱之爲#bgCanvas1），在標記旁邊添加到您的#myCanvas1，並把它們設置爲position: absolute根據最近的定位祖先這使他們有效地堆疊它們。爲了讓其他人顯示在與HTML位置無關的位置之上，可以將其中一個的z-index屬性設置爲比另一個更高的值。

因此，對於CSS，將我說的話：

#myCanvas1, #bgCanvas1 { 
    position: absolute; 
} 
#bgCanvas1 { 
    z-index: 1; 
} 
#myCanvas1 { 
    z-index: 2; 
} 

而只是一個簡單的更新到HTML：

<canvas id="myCanvas1" width="250" height="250"></canvas> 
<canvas id="bgCanvas1" width="250" height="250"></canvas> 

這裏的搗鼓它：http://jsfiddle.net/dLAVe/2/

你可能會注意到我已經更新了你的JavaScript函數，允許傳遞一個圓的顏色來繪製。您可能希望稍後對其進行定製，並將其分離爲不同的功能，因此在背景畫布上繪製靜態圓圈會更容易。