在画布上绘制，旋转时做出奇怪的事情

Question

我正在尝试在反应组件中绘制画布。该组件根据传递给它的数组的长度绘制一条线和许多正方形，作为倾斜旋转所有它们的道具取决于另一个道具。 我有一个循环可以完美地绘制它，直到它到达第 5 次迭代，然后发生了一些事情，并且在旋转后它开始与上下文恢复混淆。该循环中只有一个值更改（initialX）在浏览器中调试循环，旋转方法与恢复相同的时间被调用。我真的对这种行为感到困惑，这是一个非常简单的平局，我看不出我的错误在哪里。

This is what I'm getting

This is the same sketch without applying rotation

class Sketch extends Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        let canvas = document.getElementById("plano");
        let detector = this.props.detector
        let X, Y;
        if (canvas && canvas.getContext && detector) {
            inicializarCanvas(detector);

            function inicializarCanvas(detector) {
                let ctx = canvas.getContext("2d");
                let s = getComputedStyle(canvas);
                let w = s.width;
                let h = s.height;
                canvas.width = w.split("px")[0];
                canvas.height = h.split("px")[0];
                X = canvas.width / 2;
                Y = canvas.height / 2;

                //draw beam
                ctx.moveTo( canvas.width / 3, canvas.height / 2);
                ctx.lineTo(0, canvas.height / 2);
                ctx.strokeStyle = "#f00";
                ctx.stroke();
                ctx.restore();
                ctx.restore();
                ctx.save();

                drawBlades(ctx, canvas.width, canvas.height, detector)
            }

         

            function drawBlades(ctx, x, y, detector) {
                let initialX = x / 3
                let initialY = y / 4
                let thick = 20
                let margin = 5
                let rotation = (90 - detector.angle) * Math.PI / 180
                let i = 0
                ctx.save();
                let canvas = document.getElementById("plano");
                let ctx2 = canvas.getContext("2d");
                ctx2.save();
                console.log("blade draw")
                
                //This loop is messing up at the 5th iteration
                for (; i < detector.blades.length; i++) {
                    ctx2.strokeStyle = "#000000";
                    ctx2.translate(initialX, initialY);
                    ctx2.rotate(rotation);
                    ctx2.strokeRect(0, 0, thick, y / 2);
                    ctx2.restore()
                    // this is the only variable in that changes of
                    // value in the loop
                    initialX = margin + thick + initialX
                }
                ctx2.save()
            }
        }
    }

    render() {
        return (
            <div className='sketch'>
                <canvas width="400" height="150" id="plano">
                   Canvas not compatible with your browser
                </canvas>
            </div>
        )
    }
};

Answer 1

您在每次迭代中恢复您的上下文，但您没有保存它。

尝试添加ctx2.save() 即可。

for (; i < detector.blades.length; i++) {
    ctx2.save(); // save the context
    ctx2.strokeStyle = "#000000";
    ctx2.translate(initialX, initialY);
    ctx2.rotate(rotation);
    ctx2.strokeRect(0, 0, thick, y / 2);
    ctx2.restore()
    // this is the only variable in that changes of
    // value in the loop
    initialX = margin + thick + initialX
}