Question

我正在寻找使用html canvas创建一个简单的动画循环。每个路径（或三角形）用于按顺序淡入，然后以相同的顺序淡出。我已经找到了大量关于动画动画的资源，但没有使用alpha，特别是在画布中不连续动画路径。有什么想法吗？

免责声明：这是我第一次尝试使用canvas，而且我的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

你在那里是不诚实的。第一：你可以 NOT 同一个画布节点同时拥有多个上下文！要么使用多个相互叠加的画布节点，要么在closePath()之后和beginPath之前更改颜色。这实际上就是你正在做的事情，只有你用了5个变量就足够了。

alpha可以通过以下方式设置动画：

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

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

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中使用它。

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

2 个答案: