¿Cómo hago una fila de triángulos?
Aquí está el código que tengo hasta ahora.
soy nuevo no se que hacer aqui
function showDrawing() { let coolCanvas = document.getElementById("canvas"); let ctx = canvas.getContext("2d"); ctx.lineWidth = 5; for (let i = 0; i < 5; i += 1) { ctx.beginPath(); ctx.moveTo(126, 300); ctx.lineTo(200, 400); ctx.lineTo(50, 400); ctx.closePath(); ctx.strokeStyle = 'blue'; ctx.fillStyle = 'purple'; ctx.fill(); ctx.stroke(); } } <canvas id="canvas" width="1500" height="700" style="border:3px solid #000000;"> </canvas> <button onclick="showDrawing()">Drawing</button>Puede usar la iteración (i) y multiplicarla por el espacio que desee y agregarlo al valor de x.
function showDrawing() { let coolCanvas = document.getElementById("canvas"); let ctx = coolCanvas.getContext("2d"); ctx.lineWidth = 5; for (let i = 0; i < 5; i += 1) { ctx.beginPath(); ctx.moveTo(126+(i*170), 300); ctx.lineTo(200+(i*170), 400); ctx.lineTo(50+(i*170), 400); ctx.closePath(); ctx.strokeStyle = 'blue'; ctx.fillStyle = 'purple'; ctx.fill(); ctx.stroke(); } } <canvas id="canvas" width="1500" height="700" style="border:3px solid #000000;"> </canvas> <button onclick="showDrawing()">Drawing</button>Debe usar una variable para agregar a las posiciones X e incrementar como desee:
function showDrawing() { let coolCanvas = document.getElementById("canvas"); let ctx = canvas.getContext("2d"); let delta = 0; ctx.lineWidth = 5; for (let i = 0; i < 5; i += 1) { ctx.beginPath(); ctx.moveTo(126 + delta, 300); ctx.lineTo(200 + delta, 400); ctx.lineTo(50 + delta, 400); ctx.closePath(); ctx.strokeStyle = 'blue'; ctx.fillStyle = 'purple'; ctx.fill(); ctx.stroke(); delta += 174; } } <canvas id="canvas" width="1500" height="700" style="border:3px solid #000000;"> </canvas> <button onclick="showDrawing()">Drawing</button>Puede crear una función separada para manejar el dibujo de los triángulos, luego pasar el xStart como el valor base de la coordenada x para dibujar cualquier triángulo. Luego, en la función showDrawing , ejecute un bucle y multiplique la variable i por algún valor de espaciado. En su código, su triángulo tiene 150 píxeles de ancho y comienza en un valor x de 50, así que multipliqué el valor i por 200 para mantener la coherencia en mi código de solución.
Además, le recomiendo usar el nombre de la variable que estableció ( coolCanvas ) como referencia al lienzo o establecer esta variable para que se llame canvas en su lugar. Si solo configura el lienzo una vez y hace referencia a él una vez, probablemente pueda omitir la configuración de la referencia por completo:
let ctx = document.getElementById("canvas").getContext("2d"); function drawTriangle(ctx, xStart) { ctx.lineWidth = 5; ctx.strokeStyle = "blue"; ctx.fillStyle = "purple"; ctx.beginPath(); ctx.moveTo(xStart + 126, 300); ctx.lineTo(xStart + 200, 400); ctx.lineTo(xStart + 50, 400); ctx.closePath(); ctx.fill() ctx.stroke(); } function showDrawing() { let canvas = document.getElementById("canvas"); let ctx = canvas.getContext("2d"); ctx.lineWidth = 5; for (let i = 0; i < 5; i += 1) { drawTriangle(ctx, i * 200); } } document.getElementById("draw").addEventListener("click", showDrawing); canvas { border: 3px solid #000000; } <div><button id="draw">Drawing</button></div> <div><canvas id="canvas" width="1500" height="700"></canvas></div>