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

  • Z时代
  • 2024-01-10
  • 分类：问答

我写了自己的多边形函数;问题是当我想让多边形只绘制一个边框时，它最终使用前面的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()来循环渲染过程。问题是由第三个多边形引起的（它用浅绿色填充整个酒吧）。

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

回答：

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

回答：

你在寻找类似的东西吗？

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>

以上是 画布多边形函数在错误时间填充 的全部内容， 来源链接： utcz.com/qa/259503.html

回到顶部