将 Canvas 分层以制作背景

Posted 2023-05-08

【中文标题】将 Canvas 分层以制作背景

【英文标题】：layering up Canvas to make a background

【发布时间】：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 来做。

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

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

【参考方案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"  ></canvas> 
<canvas id="bgCanvas1"  ></canvas> 

这是它的小提琴：http://jsfiddle.net/dLAVe/2/

您可能会注意到我已经稍微更新了您的 javascript 函数，以允许传递圆圈的颜色来绘制。以后你可能想更多地自定义它，把它分成不同的功能，这样在背景画布上画一个静态的圆圈就更容易了。