如何为一系列 html 画布路径的 alpha 设置动画？

Question

我希望使用 html 画布创建一个简单的动画循环。每个路径（或三角形）旨在按顺序淡入，然后按相同顺序淡出。我发现了大量关于使用运动制作动画的资源，但没有使用 alpha，尤其是没有在画布内连续制作动画路径。有什么想法吗？

免责声明：这是我第一次尝试使用画布，我的 javascript 知识是粗制滥造的。由于我使用的是相同的形状，因此我将弄清楚如何复制、旋转和翻译原件作为单独的学习。

更新 1：要跟踪我的进度，here is a link to my sandbox。

更新 2：我更改了脚本的结构，让我可以更好地控制每条路径。

var elem = document.getElementById('loader');

if (elem && elem.getContext) {

var ctxYellow = elem.getContext('2d');
var ctxOrange = elem.getContext('2d');
var ctxRed = elem.getContext('2d');
var ctxViolet = elem.getContext('2d');
var ctxBlue = elem.getContext('2d');

// Yellow triangle
if (ctxYellow) {
    ctxYellow.fillStyle = '#f5ab1c';
    ctxYellow.beginPath();
    ctxYellow.moveTo(150, 150);
    ctxYellow.lineTo(20, 75);
    ctxYellow.lineTo(150, 0);
    ctxYellow.lineTo(150, 150);
    ctxYellow.fill();
    ctxYellow.closePath();
}

// Orange triangle
if (ctxOrange) {
    ctxOrange.fillStyle = '#f26d23';
    ctxOrange.beginPath();
    ctxOrange.moveTo(150, 150);
    ctxOrange.lineTo(150, 0);
    ctxOrange.lineTo(280, 75);
    ctxOrange.lineTo(150, 150);
    ctxOrange.fill();
    ctxOrange.closePath();
}

// Red triangle
if (ctxRed) {
    ctxRed.fillStyle = '#cd1f44';
    ctxRed.beginPath();
    ctxRed.moveTo(150, 150);
    ctxRed.lineTo(280, 75);
    ctxRed.lineTo(280, 225);
    ctxRed.lineTo(150, 150);
    ctxRed.fill();
    ctxRed.closePath();
}

// Violet triangle
if (ctxViolet) {
    ctxViolet.fillStyle = '#851a54';
    ctxViolet.beginPath();
    ctxViolet.moveTo(150, 150);
    ctxViolet.lineTo(280, 225);
    ctxViolet.lineTo(150, 300);
    ctxViolet.lineTo(150, 150);
    ctxViolet.fill();
    ctxViolet.closePath();
}

// Blue triangle
if (ctxBlue) {
    ctxBlue.fillStyle = '#295a9c';
    ctxBlue.beginPath();
    ctxBlue.moveTo(150, 150);
    ctxBlue.lineTo(150, 300);
    ctxBlue.lineTo(20, 225);
    ctxBlue.lineTo(150, 150);
    ctxBlue.fill();
    ctxBlue.closePath();
}
}

Answer 1

你快到了。第一：对于同一个画布节点，您可以不同时拥有多个上下文！要么使用堆叠在一起的多个画布节点，要么在closePath() 之后和beginPath 之前更改颜色。无论如何，这实际上就是您正在做的事情，只是您使用了 5 个变量，其中一个就足够了。

alpha 可以用这个动画：

var ctx = elem.getContext('2d');
ctx.globalAlpha = 0.4;

再次，就像可以在动画期间完成的颜色一样，虽然这会改变整体 alpha 值（不确定这是正确的方法）。我建议使用 rgba() 值代替 fillStyle。基本上，您需要将颜色定义从 hey 转换为 rgb 值，然后为 alpha 值添加一个从 0 到 1 的值。用于生成器的 google hex 到 rgba。

PS：查看 W3C 规范了解更多信息：http://dev.w3.org/html5/2dcontext/

Answer 2

好吧，我有点作弊了。我最终使用了 jQuery。这是我得出的结论：

var elem = document.getElementById('yellow');

if (elem && elem.getContext) {
var ctx = elem.getContext('2d');
    ctx.fillStyle = 'rgba(245,171,28,1)';
    ctx.beginPath();
    ctx.moveTo(150,150);
    ctx.lineTo(20,75);
    ctx.lineTo(150,0);
    ctx.lineTo(150,150);
    ctx.fill();
    ctx.closePath();
}

var elem = document.getElementById('orange');

if (elem && elem.getContext) {
var ctx = elem.getContext('2d');
    ctx.fillStyle = 'rgba(242,109,35,1)';
    ctx.beginPath();
    ctx.moveTo(150,150);
    ctx.lineTo(150,0);
    ctx.lineTo(280,75);
    ctx.lineTo(150,150);
    ctx.fill();
    ctx.closePath();
}

var elem = document.getElementById('red');

if (elem && elem.getContext) {
var ctx = elem.getContext('2d');
    ctx.fillStyle = 'rgba(205,31,68,1)';
    ctx.beginPath();
    ctx.moveTo(150,150);
    ctx.lineTo(280,75);
    ctx.lineTo(280,225);
    ctx.lineTo(150,150);
    ctx.fill();
    ctx.closePath();
 }

var elem = document.getElementById('violet');

if (elem && elem.getContext) {
var ctx = elem.getContext('2d');
    ctx.fillStyle = 'rgba(133,26,84,1)';
    ctx.beginPath();
    ctx.moveTo(150,150);
    ctx.lineTo(280,225);
    ctx.lineTo(150,300);
    ctx.lineTo(150,150);
    ctx.fill();
    ctx.closePath();
}

var elem = document.getElementById('blue');

if (elem && elem.getContext) {
var ctx = elem.getContext('2d');
    ctx.fillStyle = 'rgba(41,90,156,1)';
    ctx.beginPath();
    ctx.moveTo(150, 150);
    ctx.lineTo(150, 300);
    ctx.lineTo(20, 225);
    ctx.lineTo(150, 150);
    ctx.fill();
    ctx.closePath();
}

$(function() {
var timer = null;

var anim = function() {
    $.each([yellow, orange, red, violet, blue], function(i, el) {
        $('.color' + (i + 1)).delay(100 * i).fadeIn();
    });

    setTimeout(function() {
        $.each([yellow, orange, red, violet, blue], function(i, el) {
            $('.color' + (i + 1)).delay(100 * i).fadeOut();
        });
    }, 1500);

    if (!timer) {
        return timer = setInterval(anim, 3000);
    } else {
        return;
    }
}

anim();

})

我为每条路径制作了单独的画布，对它们进行绝对定位，并使用 jQuery 对其进行动画处理。谢谢你的建议！它有帮助。

更新：我的室友指导我进行了一些改进，以清理代码并使其运行更流畅。不过，我仍然无法让它在 Firefox 中运行。