HTML Canvas绘制圆柱图形无法完整显示的问题求助

Hey there! Let's get your cylinder drawing working properly. The main issues in your code are misplaced save()/restore() calls, messy coordinate transformations, and hardcoded side lines that don't align with your scaled circles. Here's a breakdown of the fixes and a working version of your code:

Key Problems in the Original Code #

• Misplaced Context State Management: You were restoring the context immediately after calling arc(), which undid your scale/translate before you filled or stroked the circle—so your shapes were drawing in the wrong place.
• Redundant Transformations: Repeating translate() and scale() multiple times messed up the coordinate system, leading to misaligned elements.
• Hardcoded Side Lines: The vertical lines used fixed pixel values that didn't match the scaled position of your top/bottom circles, so they didn't connect properly.

Fixed Code #

HTML (unchanged, works with dynamic sizing)

<div>
    <canvas id="cylinder" width="300" height="400"></canvas>
</div>

JavaScript

var canvas = document.getElementById("cylinder");
var ctx = canvas.getContext("2d");

drawCylinder(canvas, ctx, "lightblue", "black", 3);

function drawCylinder(canvas, ctx, fill, border, lineWidth) {
    // Define cylinder properties
    const radius = 30;
    const cylinderHeight = 200;
    const horizontalScale = 6; // Creates the elliptical top/bottom for perspective

    // Save the original context state to reset later
    ctx.save();

    // Move origin to the center of the canvas for easy positioning
    ctx.translate(canvas.width / 2, canvas.height / 2);

    // Draw top ellipse
    ctx.save();
    ctx.scale(horizontalScale, 1); // Stretch horizontally to make an ellipse
    ctx.beginPath();
    ctx.arc(0, -cylinderHeight/2, radius, 0, 2 * Math.PI);
    ctx.fillStyle = 'YellowGreen';
    ctx.fill();
    ctx.lineWidth = 7;
    ctx.strokeStyle = 'GainsBoro';
    ctx.stroke();
    ctx.restore(); // Reset scale after drawing top ellipse

    // Draw bottom ellipse
    ctx.save();
    ctx.scale(horizontalScale, 1);
    ctx.beginPath();
    ctx.arc(0, cylinderHeight/2, radius, 0, 2 * Math.PI);
    ctx.fillStyle = 'MediumSlateBlue';
    ctx.fill();
    ctx.lineWidth = 7;
    ctx.strokeStyle = 'GainsBoro';
    ctx.stroke();
    ctx.restore();

    // Draw cylinder side lines (connect top and bottom)
    ctx.lineWidth = 3;
    ctx.strokeStyle = 'Black';
    const leftEdge = -radius * horizontalScale;
    const rightEdge = radius * horizontalScale;
    ctx.beginPath();
    ctx.moveTo(leftEdge, -cylinderHeight/2);
    ctx.lineTo(leftEdge, cylinderHeight/2);
    ctx.moveTo(rightEdge, -cylinderHeight/2);
    ctx.lineTo(rightEdge, cylinderHeight/2);
    ctx.stroke();

    // Draw top ellipse front edge (for depth)
    ctx.save();
    ctx.scale(horizontalScale, 1);
    ctx.beginPath();
    ctx.arc(0, -cylinderHeight/2, radius + 0.8, 0, Math.PI);
    ctx.lineWidth = 4;
    ctx.strokeStyle = 'Black';
    ctx.stroke();
    ctx.restore();

    // Draw bottom ellipse front edge
    ctx.save();
    ctx.scale(horizontalScale, 1);
    ctx.beginPath();
    ctx.arc(0, cylinderHeight/2, radius + 0.8, 0, Math.PI);
    ctx.lineWidth = 4;
    ctx.strokeStyle = 'Black';
    ctx.stroke();
    ctx.restore();

    // Restore original context state
    ctx.restore();
}

What Changed? #

1. Proper Context State Handling: Each shape's scale() is wrapped in save()/restore() to avoid messing up the global coordinate system.
2. Centered Positioning: We translate to the canvas center once, then use relative positions (-cylinderHeight/2 and cylinderHeight/2) to place the top/bottom ellipses, ensuring the cylinder stays centered even if you adjust the canvas size.
3. Dynamic Side Lines: Instead of hardcoding pixel values, we calculate the left/right edges using the scaled radius, so they perfectly connect to the top and bottom ellipses.
4. Cleaned-up Transformations: No more repeated translate()/scale() calls—each shape only uses the transformations it needs.

Now your cylinder should display fully, with correctly connected sides, proper colors, and no stretching when you adjust the canvas width or height!

内容的提问来源于stack exchange，提问作者Sboh