Javascript 为什么我的目的地用白色填写？

所以我最近一直在玩粒子系统。我想试着做一些烟花，在学习如何“追踪”的过程中，我被卡住了。据我所知，如果填充样式为rgba（0,0,0,0.5），globalcompositeoperation的目标应该在画布上放置一个黑色透明图像；。然而，奇怪的是，当我这样做的时候，它把画布涂成了白色。我不知道为什么或者我在这里做错了什么。这是一个

window.reqFrame=（函数（）{
return window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.msRequestAnimationFrame||
window.oRequestAnimationFrame||
window.requestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})();
var画布，ctx；
var W=窗内宽度；
var H=窗内高度；
粒子=[]；
函数粒子（）{
该点x=W/2；
这个y=H/2；
这个值为0.vx=-4；
此.c=“#FF0000”；
}
particle.prototype.draw=函数（）{
ctx.moveTo（this.x，this.y）；
ctx.lineTo（this.x-4，this.y）；
ctx.strokeStyle=“#FF0000”；
ctx.stroke（）
}
particle.prototype.update=函数（）{
this.x+=this.vx；
}
函数循环（）{
ctx.globalCompositeOperation=“目的地输出”；
ctx.fillStyle=“rgba（0,0,0,0.5）”；
ctx.fillRect（0,0,W,H）；
ctx.globalCompositeOperation=“源代码结束”；
粒子[0]。绘制（）；
粒子[0]。更新（）；
请求帧（循环）；
}
函数paintRect（颜色、x、y、w、h）{
ctx.fillStyle=颜色；
ctx.fillRect（x，y，w，h）；
}
函数paintCanvas（彩色）{
ctx.fillStyle=颜色；
ctx.fillRect（0,0,W,H）；
}
函数init（）{
canvas=document.getElementById（'canvas'）；
ctx=canvas.getContext（'2d'）；
画布宽度=W；
canvas.height=H；
粒子。推（新粒子（））；
loop（）；
}
init（）
正文{
溢出：隐藏；
}
将rgba（0,0,0,0.5）转换为HEXON绘制新行时忘记使用beginPath（）。我修复了这个问题，并使用globalAlpha来实现渐进式擦除效果：