canvas之旋转一条线段

 <canvas id="canvas" width="600" height="500" style="background-color: yellow;"></canvas>

  var canvas=document.getElementById("canvas");
     var cxt=canvas.getContext('2d');
     cxt.lineWidth=10;
     cxt.beginPath();
     cxt.moveTo(20,20);
     cxt.lineTo(180,20)
     cxt.stroke();
     cxt.closePath();
 
     //设置异次元空间
     cxt.save();
     //异次元空间 重置原点,默认是画布的(0,0)点
     cxt.translate(20,20);
     //设置旋转角度  参数时弧度 角度0--360 弧度=角度*Math.PI/180
     cxt.rotate(-30*Math.PI/180);
     //旋转一个线段
     cxt.lineWidth=10;
     cxt.beginPath();
     cxt.moveTo(0,0);
     cxt.lineTo(20,180);
     cxt.stroke();
     cxt.closePath();
     //将旋转之后的元素返回原画布
     cxt.restore();