Quiero crear un lienzo animado, que también usa una ruta. Escribí este código combinando dos scripts: script1 y script2 .
La secuencia de comandos genera una excepción: no se pudo ejecutar 'rellenar' en 'CanvasRenderingContext2D': el valor proporcionado '256' no es un valor de enumeración válido del tipo CanvasFillRule.
¿Qué puede estar mal?
const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); const r = new Path2D(); r.moveTo(0, 0); r.lineTo(800, 0); r.lineTo(800, 200); r.lineTo(0, 400); r.lineTo(0, 0); r.closePath(); let time = 0; const color = function (x, y, r, g, b) { context.fillStyle = `rgb(${r}, ${g}, ${b})` context.fill(r); } const R = function (x, y, time) { return (Math.floor(191 + 64 * Math.cos((x * x - y * y) / 300 + time))); } const G = function (x, y, time) { return (Math.floor(191 + 64 * Math.sin((x * x * Math.cos(time / 4) + y * y * Math.sin(time / 3)) / 300))); } const B = function (x, y, time) { return (Math.floor(191 + 64 * Math.sin(5 * Math.sin(time / 9) + ((x - 100) * (x - 100) + (y - 100) * (y - 100)) / 1100))); } const startAnimation = function () { for (x = 0; x <= 30; x++) { for (y = 0; y <= 30; y++) { color(x, y, R(x, y, time), G(x, y, time), B(x, y, time)); } } time = time + 0.03; window.requestAnimationFrame(startAnimation); } startAnimation(); body { height: 400px; width: 500px; } canvas { width: 100%; height: 100%; } <canvas id="canvas" width="32px" height="32px">El problema es que está excediendo los límites de un valor de color requerido en la función rgb() .
Los números válidos son 0-255
Deberá modificar R() , G() y B()
Después de calcular el resultado en cualquiera de esas funciones, réstele 1 antes de regresar.
EDITAR: * Los límites de los valores de color debían corregirse, pero no era el problema principal.
El problema es que creas una ruta y nombras la variable r
Dentro de la función de color, tomas r como parámetro.
Cuando llamas a fill , se pasa el valor de Red, no la ruta en sí.
Cambie su variable de ruta a algo que no sea r y estará dorado.