透明圆圈未显示 [HTML5/JavaScript]

Question

我正在尝试在 canvas 上画萤火虫。我有一个 1x1 白色像素的图像，我想在它周围有一个透明圆圈来模拟发光。到目前为止，我已经成功绘制了圆圈，但是当我尝试更改 2d 上下文的全局 alpha 时，图像没有绘制，圆圈也没有。这让我困惑了一段时间，因为我在绘制周围的圆圈之前绘制了图像。我该如何解决这个问题？

我的代码：

thatBug.draw = function () {

    ctx.drawImage(bugImage, thatBug.x, thatBug.y, thatBug.size, thatBug.size);

    ctx.save();
    ctx.globalAlpha(0.4);
    ctx.beginPath();
    ctx.arc(thatBug.x, thatBug.y, thatBug.size + thatBug.glowAmt, 0, 2 * Math.PI, false);
    ctx.fillStyle = 'white';
    ctx.fill();
    ctx.restore();

};

Answer 1

我自己修好了。 ctx.globalAlpha(0.4) 应该是 globalAlpha = 0.4

透明圆圈未显示 [HTML5/JavaScript]

Transparent circles not showing up [HTML5/JavaScript]

html

javascript

shape