1

在其他 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 中做了这个）

带背景的弧线

我不想使用图像，并将其放在圆弧下方，我已经在画布上使用背景图像进行了尝试，但我对对齐方式非常不满，对齐背景实际上是微像素不同的到动画弧。另外我想用画布来做。

任何人都可以帮我弄清楚如何做吗？我想它会将动画弧放在一个静态圆圈的顶部。

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

4

1 回答 1

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

于 2013-04-01T10:47:37.510 回答