如何制作一排三角形？
這是我到目前為止的代碼。
我是新來的我不知道在這里做什么。
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>uj5u.com熱心網友回復：
您可以使用迭代 (i) 并將其乘以所需的間距并將其添加到 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>uj5u.com熱心網友回復：
您應該使用變數添加到 X 位置并根據需要增加：
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>uj5u.com熱心網友回復：
您可以創建一個單獨的函式來處理三角形的繪制，然后傳入xStart要繪制的任何三角形的基本 x 坐標值。然后在showDrawing函式中，運行一個回圈并將i變數乘以某個間距值。在您的代碼中，您的三角形寬 150 像素，從 x 值 50 開始，因此我將該i值乘以200在我的解決方案代碼中保持一致性。
此外，我強烈建議使用您設定的變數名稱 ( coolCanvas) 作為對畫布的參考，或者將此變數設定為命名canvas。如果您只設定畫布一次并參考它一次，您可能可以完全跳過設定參考：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/368647.html