キャンバスに描いて回転させると奇妙なことが起こる

Question

私はキャンバスを反応コンポーネントに描画しようとしています。コンポーネントは、配列に渡される配列の長さに応じて線とそれに対応する数の四角形を描画し、別の小道具に応じてすべてを回転させる小道具として描画します。 私は5回目の繰り返しに達するまで完全に描画するループを持っています。それで何かが起き、回転後にコンテキストの復元を混乱させるようになります。そのループには値の変更は1つしかありません（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 
}