Question

旋转功能正在默认渲染，但在按钮点击事件中旋转功能不起作用！

<!DOCTYPE html>
<html>
<style>
body { margin: 10px;
        padding: 10px;
        }
        </style>
<body>
<script>
  function Rotatectx()
    {
      var c=document.getElementById("myCanvas");
      var ctx=c.getContext("2d");
      ctx.lineWidth=10;
      ctx.rotate(10*Math.PI/180); //This rotate is not getting called
    }
</script>
 <button onclick="Rotatectx()">Rotate</button>
<div id="IDD">

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
    </div>

<script>

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

//ctx.rotate(10*Math.PI/180); enable this to get a rotation.

    ctx.fillStyle='#FF3399';
    ctx.shadowBlur=15;
    ctx.shadowOffsetX=10;
    ctx.shadowOffsetY=10;
    ctx.shadowColor="#009933";
    ctx.translate(200,100);
    var gradient=ctx.createLinearGradient(0,0,170,0);
    gradient.addColorStop("0","magenta");
    gradient.addColorStop("0.5","blue");
    gradient.addColorStop("1.0","red");

    ctx.strokeStyle=gradient;
    ctx.lineWidth=5;

    var grd = ctx.createRadialGradient(238, 50, 10, 238, 50, 300);
    grd.addColorStop(0, '#8ED6FF');
    grd.addColorStop(1, '#004CB3');
    // for custom shape.
    ctx.moveTo(120,20);
    ctx.lineTo(30,90);
    ctx.lineTo(30,130);
    ctx.lineTo(120,200);
    ctx.lineTo(210,130);
    ctx.lineTo(210,90);
    ctx.lineTo(120,20);
    ctx.closePath();
    ctx.fillstyle= '#8ED6FF';
    ctx.fill();
    ctx.stroke();

</script>

</body>
</html>

Answer 1

context.rotate函数不会影响您之前在画布上绘制的任何内容。它只影响你之后绘制的内容。当您想要旋转画布的现有内容时，您必须将其擦除，旋转它然后再次绘制所有内容。

或者，您可以在canvas-element的样式中使用CSS3 transformation来旋转文档中画布的显示。但请记住，CSS转换是一种非标准功能，仍处于工作草案状态。

Answer 2

重新考虑你的代码。设置旋转只会影响下一个图纸。

尝试这样的事情：

Online demo here

/// place these in global context once
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function Rotatectx() {

  ctx.clearRect(0, 0, c.width, c.height);         /// clear canvas with
                                                  /// current rotation.
  ctx.translate(c.width * 0.5, c.height * 0.5);   /// translate to center first
  ctx.rotate(10 * Math.PI/180);                   /// rotate
  ctx.translate(-c.width * 0.5, -c.height * 0.5); /// translate back

  render();  /// call the drawing
}

除非您希望图像从其角落旋转，否则我们需要首先转换为居中，然后旋转并平移。这是因为旋转（变换）矩阵总是围绕原点（0,0）旋转。

然后将要更新的绘图放在一个易于重现的方法中。您还需要每次都清除画布 - 现在我将其放入旋转方法中，因为转换矩阵也会影响clearRect()方法。您可能希望通过在脚本中使用clear()方法来进一步重新计算因素。

function render() {

    ctx.save();         /// this saves current state

    ctx.beginPath();    /// important!

    ctx.fillStyle='#FF3399';
    ctx.shadowBlur=15;
    ctx.shadowOffsetX=10;
    ctx.shadowOffsetY=10;
    ctx.shadowColor="#009933";

    ctx.translate(200,100);

    var gradient=ctx.createLinearGradient(0,0,170,0);
    gradient.addColorStop("0","magenta");
    gradient.addColorStop("0.5","blue");
    gradient.addColorStop("1.0","red");

    ctx.strokeStyle=gradient;
    ctx.lineWidth=5;

    var grd = ctx.createRadialGradient(238, 50, 10, 238, 50, 300);
    grd.addColorStop(0, '#8ED6FF');
    grd.addColorStop(1, '#004CB3');

    // for custom shape.
    ctx.moveTo(120,20);
    ctx.lineTo(30,90);
    ctx.lineTo(30,130);
    ctx.lineTo(120,200);
    ctx.lineTo(210,130);
    ctx.lineTo(210,90);
    ctx.lineTo(120,20);
    ctx.closePath();
    ctx.fillstyle= '#8ED6FF';
    ctx.fill();
    ctx.stroke();

    ctx.restore();   /// this restore to previous state
}

由于代码使用本地翻译，设置阴影等，save() / restore()可能是一个优势，因为恢复将在渲染完成后“重置”所有这些设置。如果不是你在那里添加的翻译，阴影将影响你画到画布的下一个东西。

要重置旋转，您可以执行以下操作：

ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, c.width, c.height);
ctx.render();

在按钮单击事件上调用时，旋转不起作用

2 个答案:

Online demo here