分层画布做背景

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函数，允许传递一个圆的颜色来绘制。您可能希望稍后对其进行定制，并将其分离为不同的功能，因此在背景画布上绘制静态圆圈会更容易。