畫布繪圖應用程序。 旋轉圖

Question

我正在制作畫布繪圖應用程序，並且想要實現繪圖的旋轉。 但是，當我旋轉它並希望繼續繪制時，鼠標光標沒有指向要繪制的像素。 我該如何解決？ 這是我的代碼：

    <button id="rotate">rotate right</button>



    var clickX = new Array();
    var clickY = new Array();
    var clickDrag = new Array();
    var paint = false;
    var context = null;
    var canvas = null;
    canvas = document.getElementById('drawing');
    context = canvas.getContext('2d');

    rotate.onclick = function() { 

        context.translate(400,0);
        context.rotate(90*Math.PI/180);                 
        draw();
    }

    canvas.onmousedown = function(e){
        paint = true;           
        addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop,false);                    
        draw();

    }
    canvas.onmousemove = function(e){


    if(paint){  

        addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);            
        draw();

        }
    canvas.onmouseup = function(){
      paint = false;
    }

   function addClick(x, y, dragging)
    { 


      clickX.push(x);
      clickY.push(y);
      clickDrag.push(dragging);       


    }

    function redraw(){
      context.clearRect(0, 0, 400, 400);
      context.lineJoin = "round";
      // usunieto context.lineWidth = 5;

      for(var i=0; i < clickX.length; i++)
      {     



        context.beginPath();
        if(clickDrag[i]){

          context.moveTo(clickX[i-1], clickY[i-1]);
         }else{
           context.moveTo(clickX[i], clickY[i]);
         }
         context.lineTo(clickX[i], clickY[i]);
         context.closePath();            
         context.stroke();
         }


      }


    }

Answer 1

將轉換應用於畫布仍保持為畫布狀態。 您需要保存畫布狀態，應用轉換，繪制，然后恢復畫布狀態。 2D上下文API提供ctx.save()和ctx.restore()來為您執行此操作。 它使用堆棧來保存狀態，這意味着可以嵌套保存，但是必須通過匹配的還原來刪除每個保存；

ctx.save();  // push the current state onto the save stack
ctx.rotate(Math.PI/2); // rotate 90deg clockwise
// call your draw function
ctx.restore();  // pop the last saved state from the save stack

那應該解決您的問題。