从HTML5画布图纸中删除发光？

Question

如果我在黑色背景上绘制一个绿色圆圈，然后用黑色绘制相同的圆圈，则会留下绿色阴影/光晕。圆圈实际上没有被删除。

如何让它再次变成纯黑色并消除光晕？

我已尝试context.shadowColor = "transparent";

这是一个片段：

context.beginPath();
context.arc(x-1, y-2, 2, 0, 2*Math.PI);
context.fillStyle = "#FF0000";
//context.strokeStyle = "#FF0000";
//context.stroke();
context.fill();
context.beginPath();
context.arc(x-1, y-2, 2, 0, 2*Math.PI);
context.fillStyle = "#000000";
//context.strokeStyle = "#000000";
//context.stroke();
context.fill();

这是完整的对象：

Answer 1

如何清除画布。

根据您给出的图像的外观，您想要编写某种游戏或动画。

完成游戏和动画的一般方法是每帧重绘整个游戏画面。这极大地简化了渲染引擎的设计。通过简单地改变绘制它们的顺序，可以轻松地将一个东西绘制在另一个上面。让某些东西消失，只是不能渲染它。

我假设您知道如何加载图片

清除屏幕

您可以通过多种方式清除屏幕。

// assuming ctx is the 2d Context and width and height are the canvas width and height.
ctx.clearRect(0, 0, width, height); 

或者用一个矩形填充屏幕。

var backgroundColour = "#000";
ctx.fillStyle = backgroundColour;
ctx.fillRect(0, 0, width, height);

或使用背景图片

var backgroundImage = new Image();
backgroundImage.src = "backgroundImage URL";
// then wait for image to load.
// then 
ctx.drawImage(backgroundImage, 0, 0, width, height);

绘制精灵

现在你可以绘制图形了。同样有很多方法可以做到这一点。一个approch是保留所有对象的列表，并在屏幕清除后一次性绘制它们。

// create or load a game sprite (image)
var gameSprite = new Image();
gameSprite.src = "gameSprite URL";
// create a list of sprites.
var mySprites = [
    {x : 10, y : 10, image : gameSprite}, // sprite 1
    {x : 30, y : 60, image : gameSprite}, // sprite 2
    {x : 70, y : 40, image : gameSprite}  // sprite 3
];

// itterate the list and draw each sprite one at a time.
function renderSprites (spriteList) {
    var i,len,s;
    len = spriteList.length;
    for (i = 0; i < len; i++) {
        s = spriteList[i];
        ctx.drawImage(s.image, s.x, s.y);
    }
}

动画一切

最后一件事是你需要将它全部与显示硬件同步，以便它以尽可能最大的帧速率运行，并且不会产生诸如剪切或闪烁之类的伪像。要执行此操作，请使用与requestAnimationFrame类似的setTimeout，但不提供浏览器处理该计时的时间。

当浏览器准备好绘制下一帧时，您需要提供一个主循环函数，以便requestAnimationFrame调用。在此功能中，首先清除屏幕，执行游戏逻辑，绘制所有精灵，然后请求下一帧（尽管您可以在主循环内的任何阶段请求下一帧）。

function mainLoop(time){   // requestAnimationFrame adds the argument (time). 
                           // This is the time in milliseconds.
    // clear the screen
    ctx.drawImage(backgroundImage,0,0,width,height);

    // do game logic here

    renderSprites(mySprites); // draw the sprites

    // now request the next frame and do it all again.
    requestAnimationFrame(mainLoop);
}

// start the animation by requesting the first frame.
requestAnimationFrame(mainLoop);

这将以60fps（每秒帧数）运行，并且可以轻松处理超过100个精灵（除了最基本的设备之外的所有精灵）