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

Question

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

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 
}