Question

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

＆＃13;

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()
    })
  }
}

＆＃13;

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

＆＃13;

现在我看一下，它似乎在JSFiddle中工作得非常漂亮。唯一的区别是在实际程序中，我使用requestAnimationFrame()循环渲染过程。问题是由第三个多边形引起的（它用浅绿色填充整个条形图。）

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

Answer 1

你在找这样的东西吗？

＆＃13;

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
function drawPoly(){
	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: 'red', width: 2 }, false, 114, 4, 104, 19, 4, 19, 14, 4)
  health--;
  if(health<0){
    health = 0;
  }
  window.requestAnimationFrame(drawPoly);
}
drawPoly();

＆＃13;

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

＆＃13;

Answer 2

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

画布多边形功能在错误的时间填充

2 个答案: