javascript - Canvas 元素在不应该改变颜色的情况下改变颜色？

Question

我正在尝试制作一个 HTML5 Canvas 跳棋游戏。

我为我的项目制作了一个 JSFiddle:https://jsfiddle.net/0q6thfq8/

这是我认为可能导致问题的函数:(第 77 行)

this.drawCheckers = function() {
    this.drawSquares();
    for(var checker of this.checkers) {
        checker.draw();         
    }
    if(this.selection != null) {
        ctx.strokeStyle = "green";
        ctx.lineWidth = "5";
        ctx.rect(this.selection.x,this.selection.y,64,64);
        ctx.stroke();
    }
}

由于某种原因，选择棋子时，最后一个黑色棋子会出现绿色轮廓。

由于我遇到的问题的独特性，我很难找到讨论此问题的其他论坛帖子和网站。

有人能解释一下这个问题吗？谢谢。

Answer 1

添加beginPath():

if(this.selection != null) {
    ctx.beginPath();
    ctx.strokeStyle = "green";
    ctx.lineWidth = "5";
    ctx.rect(this.selection.x,this.selection.y,64,64);
    ctx.stroke();
}

<强> Fiddle

这将在绘制新选区之前清除路径。否则旧路径内容将被包含。

另请记住，ellipse() 需要 polyfill在某些浏览器中。