No puedo entender el comportamiento del método de fill HTML Canvas. Por definición, debe llenar la ruta actual o la ruta dada. Sin embargo, noté que el comportamiento del método de fill es el mismo independientemente de dónde lo coloque, es decir, antes o después de cerrar mi ruta usando el método closePath . Todavía termina llenando mi cuadrado dibujado usando la path de Canvas exactamente de la misma manera.
function draw(context) { context.fillStyle = "#FF1010"; context.beginPath(); context.moveTo(0, 0); context.lineTo(100, 0); context.lineTo(100, 100); context.lineTo(0, 100); context.lineTo(0, 0); context.closePath(); // Where should this be? context.fill(); } Entonces, ¿cuál es la forma correcta de usar el método de fill ?
No necesita llamar a closePath() para completar la ruta, se hace automáticamente.
Los subtrayectos cerrados* son importantes para los trazos, por ejemplo, un rectángulo cerrado no representará el mismo trazo que un cuádruple no cerrado de lineTo :
const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); const path = new Path2D(); path.moveTo(20, 20); path.lineTo(70, 20); path.lineTo(70, 70); path.lineTo(20, 70); path.lineTo(20, 20); ctx.lineWidth = 10; ctx.stroke(path); // closed path on the right ctx.translate(80, 0); path.closePath(); ctx.stroke(path); <canvas></canvas> Pero fill tratará a ambos exactamente de la misma manera:
const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); const path = new Path2D(); path.moveTo(20, 20); path.lineTo(70, 20); path.lineTo(70, 70); path.lineTo(20, 70); // only 3 lineto on the left ctx.fill(path); // 4 lineto in the center ctx.translate(80, 0); path.lineTo(20, 20); ctx.fill(path); // closed path on the right ctx.translate(80, 0); path.closePath(); ctx.fill(path); <canvas></canvas> Además, para aclarar las cosas, ya que parece que incluso los respondedores aquí todavía están confundidos, closePath() no significa que su declaración de ruta haya terminado. Simplemente significa que la "subruta" anterior está encerrada; para hacer las cosas más fáciles de lo que son, es solo un lineTo hasta el último punto moveTo . Si continúa agregando comandos de ruta después de eso, seguirá usando esa ruta secundaria y también comenzará desde ese punto.
Para iniciar una nueva declaración de ruta, llame a ctx.beginPath() .
.* se crea una nueva subruta en cada llamada a moveTo , closePath , rect y roundRect .
Desde un punto de vista lógico, la forma correcta sería cerrar la ruta antes de llamar a fill() simplemente porque sin una ruta cerrada, no habrá nada que llenar. Para mayor comodidad, su ruta se cierra automáticamente tan pronto como llama a fill().
Sin embargo, recuerde que si no cierra la ruta en absoluto y usa operaciones de dibujo adicionales después, continuará usando la ruta anterior.