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

我正在寻找创建一个简单的动画循环使用HTML画布。每条路径（或三角形）都是按顺序淡入，然后以相同的顺序淡出。我已经发现围绕动画制作动画的大量资源，但不能在动画中连续使用alpha动画，尤其不能动画动画。有任何想法吗？如何为一系列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(); 
} 
}

来源

2012-03-10 Lee Gentry

你试过'保存'/'加载'方法吗？ – kirilloid 2012-03-10 18:23:45

我没有。但我不确定为什么我想要。 – 2012-03-10 23:25:28

如果你想动画，没有其他对象，那么你会用clearRect足够。否则，它们可能会有所帮助。 – kirilloid 2012-03-11 07:40:27

OK，我有种上当受骗。我结束了使用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中使用它。

来源

2012-03-12 03:11:37

你是那里的最爱。第一：你可以不是同一个画布节点同时有多个上下文！要么使用堆叠在一起的多个画布节点，要么在closePath()之后和beginPath之前更改颜色。这实际上就是你在做什么，只是你用了5个变量来满足它。

阿尔法可以用这个动画效果：

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

再次，喜欢的颜色这可以在动画制作过程中进行，虽然这将改变总体α值（不知道这是正确的做法）。我建议使用rgba()来代替fillStyle。基本上你需要将颜色定义从hey转换为rgb值，然后为alpha值添加一个从0到1的值。谷歌十六进制生成器的rgba。

PS：检查出更多的信息W3C规范：http://dev.w3.org/html5/2dcontext/

来源

2012-03-11 07:45:59

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

回答

相关问题