将 Canvas 分层以制作背景答案

【问题标题】：layering up Canvas to make a background将 Canvas 分层以制作背景
【发布时间】：2013-03-22 09:56:46
【问题描述】：

在其他 Stack Overflow 成员的帮助下。我已经创建了我正在构建的网站的动画画布部分。

我对 Canvas 很陌生，我想做的是有一个动画弧/圆

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 来做。

谁能帮我弄明白怎么做？我猜它会将动画弧放在一个静态圆圈的顶部。

请帮忙，因为这让我发疯了！

【问题讨论】：

标签： function animation canvas jquery-animate html5-canvas

【解决方案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 函数，以允许传递圆圈的颜色来绘制。以后你可能想更多地自定义它，把它分成不同的功能，这样在背景画布上画一个静态的圆圈就更容易了。

【讨论】：