画布绘图应用程序。旋转绘图

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

这应该可以解决你的问题。