画布多边形函数在错误时间填充

Question

我写了自己的多边形函数;问题是当我想让多边形只绘制一个边框时，它最终使用前面的fillStyle并绘制上一个多边形。

var canvas = document.getElementById('canvas') 
 
var ctx = canvas.getContext('2d') 
 

 
const HP_DARKGREEN = '#003100' 
 
const HP_LIGHTGREEN = '#007E00' 
 
var health = 50 
 

 
function polygon(x1, y1, border = { 
 
    color: 'black', 
 
    width: 1, 
 
    lineJoin: 'round', 
 
    lineCap: 'square' 
 
}, fillColor = false, ...coords) { 
 
    /* Draws a polygon given an array of coordinates */ 
 
    let c = coords 
 
    ctx.translate(x1, y1) 
 
    if (border) { 
 
    ctx.strokeStyle = border.color 
 
    } 
 
    ctx.beginPath() 
 
    for (let i = 0; i < c.length - 1; i += 2) { 
 
    ctx.lineTo(c[i], c[i + 1]) 
 
    } 
 
    ctx.closePath() 
 
    if (fillColor) { 
 
    ctx.fillStyle = fillColor 
 
    ctx.fill() 
 
    } 
 
    if (border) { 
 
    ctx.lineWidth = border.width 
 
    ctx.lineCap = border.lineCap 
 
    ctx.lineJoin = border.lineJoin 
 
    ctx.stroke() 
 
    } 
 
    ctx.translate(-x1, -y1) 
 
} 
 

 
//Trying to draw these polygons 
 
polygon(14, 4, false, HP_DARKGREEN, 114, 4, 104, 19, 4, 19, 14, 4) 
 

 
polygon(14, 4, false, HP_LIGHTGREEN, health + 14, 4, health + 4, 19, 4, 19, 14, 4) 
 

 
polygon(14, 4, { 
 
    color: 'black', 
 
    width: 2 
 
}, false, 114, 4, 104, 19, 4, 19, 14, 4) 
 

 
var Render = { 
 
    clear:() => { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height) 
 
    }, 
 
    update:() => { 
 
    Render.clear() 
 
    Render.display.health() 
 
    requestAnimationFrame(() => { 
 
     Render.update() 
 
    }) 
 
    } 
 
}

<canvas id='canvas' width=192 height=192></canvas>

现在，我看它，它似乎在的jsfiddle做工精美。唯一的区别是在实际的程序中，我使用requestAnimationFrame()来循环渲染过程。问题是由第三个多边形引起的（它用浅绿色填充整个酒吧）。

编辑：我只是试图在我的代码中运行一次函数。它运行良好;当我运行循环功能时，它无法正确绘制。我不确定这是否是默认参数或其他问题的问题...

Answer 1

那么，答案正是你所期待的。与此完全无关的未完成的代码行导致了所有问题。编程很有趣。

Answer 2

你在寻找类似的东西吗？

var canvas = document.getElementById('canvas') 
 
var ctx = canvas.getContext('2d') 
 

 
const HP_DARKGREEN = '#003100' 
 
const HP_LIGHTGREEN = '#007E00' 
 
var health = 50 
 

 
function polygon(x1, y1, border = { color: 'black', width: 1, lineJoin: 'round', lineCap: 'square'}, fillColor = false, ...coords) { 
 
\t \t \t /* Draws a polygon given an array of coordinates */ 
 
\t \t \t let c = coords 
 
\t \t \t ctx.translate(x1, y1) 
 
\t \t \t if (border) { ctx.strokeStyle = border.color } 
 
\t \t \t ctx.beginPath() 
 
\t \t \t for (let i=0; i<c.length - 1; i+=2) { 
 
\t \t \t \t ctx.lineTo(c[i],c[i+1]) 
 
\t \t \t } 
 
\t \t \t ctx.closePath() 
 
\t \t \t if (fillColor) { 
 
\t \t \t \t ctx.fillStyle = fillColor 
 
\t \t \t \t ctx.fill() 
 
\t \t \t } 
 
\t \t \t if (border) { 
 
\t \t \t \t ctx.lineWidth = border.width 
 
\t \t \t \t ctx.lineCap = border.lineCap 
 
\t \t \t \t ctx.lineJoin = border.lineJoin 
 
\t \t \t \t ctx.stroke() 
 
\t \t \t } 
 
\t \t \t ctx.translate(-x1, -y1) 
 
\t \t } 
 
    
 
//Trying to draw these polygons 
 
function drawPoly(){ 
 
\t polygon(14, 4, false, HP_DARKGREEN, 114, 4, 104, 19, 4, 19, 14, 4) 
 
\t polygon(14, 4, false, HP_LIGHTGREEN, health + 14, 4, health + 4, 19, 4, 19, 14, 4) 
 
\t polygon(14, 4, { color: 'red', width: 2 }, false, 114, 4, 104, 19, 4, 19, 14, 4) 
 
    health--; 
 
    if(health<0){ 
 
    health = 0; 
 
    } 
 
    window.requestAnimationFrame(drawPoly); 
 
} 
 
drawPoly();

<canvas id='canvas' width=192 height=192></canvas>