Question

在其他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是Arc旅行的百分比。这是一个让人们更容易看到的小提琴。

http://jsfiddle.net/dLAVe/

我想要做的仍然是使用画布，给每个弧一个完整的背景圈。这是我想要实现的图像，（我在photoshop中做到了）

Arc with Background

我不想使用图像，并将它放在弧下，我已经尝试过在画布上使用背景图像，但我真的很肛门对齐，它的字面意思是微像素不同于将背景与动画弧对齐。另外我想用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函数，允许传递一个圆形的颜色来绘制。您可能希望稍后自定义它，并将其分成不同的功能，因此在背景画布上绘制静态圆更容易。

将Canvas分层以制作背景

1 个答案: