旋转 rotate

rotate(angle);

旋转坐标轴, 旋转的中心是 坐标原点

这个方法只接受一个参数:旋转的角度(angle),它是 顺时针方向 的,以 弧度 为单位的值。

比如通过translate绘制旋转的图形:

let canvas = document.getElementById('canvas')
window.addEventListener('load', draw(canvas), false);
function draw(canvas) {
  let context = canvas.getContext('2d')
  let w = canvas.width
  let h = canvas.height
  context.save();
  context.translate(w / 2, h / 2);
  let index = 0
  for (let i = 0; i < 360; i = i + 45) {
    index ++
    context.rotate(Math.PI/180 * i)
    context.fillStyle = `rgb(${index * 10}, ${index * 20}, ${index * 50})`
    context.fillRect(0,0,20,100)
  }
  context.restore();
}

再比如:

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.translate(75,75);  // 移动原点到(75,75)处
  for (var i=1;i<6;i++){ // 里往外画5圈圆
    ctx.save(); // 先保存状态
    ctx.fillStyle = 'rgb('+ (50*i) +','+ (255-20*i) +',' + (30*i) + ')'; // 圆的颜色
    // 下面实现效果是:通过旋转画板,在x轴上画圆。这样的好处是方便计算,所有圆在x轴上实现,通过旋转画板来画所有圆。
    for (var j=0; j<i*6; j++) {
      ctx.rotate(Math.PI*2/(i*6)); // 顺时针旋转Math.PI*2/(i*6)度
      ctx.beginPath();
      ctx.arc(0,i*12.5,5,0,Math.PI*2,true); // 在(0,12.5*i)处画圆,半径为5px,画360度。
      ctx.fill();
    }
    ctx.restore(); // 还原到保存前的状态
  }
}
draw();

TIP

在很多实际场景中,我们对某个图形元素做旋转,默认情况之下,其旋转都会围绕Canvas坐标系统原点(0,0)进行旋转。但实际上,我们需要围绕元素中心点来做旋转。在CSS中,我们有一个transform-origin属性可以修改原点。但在Canvas中,就需要借助Canvas的坐标变换中的translate()方法来修改元素的原点,也就是将原点移动到元素的中心位置。

比如我们绘制一个矩形:

var x = 100;
var y = 100;
var width = 100;
var height = 100;
ctx.strokeRect(x, y, width, height);

此时,我们可以将坐标中心移到矩形的中心,即

ctx.translate(x + width / 2; y + height / 2)

此时再针对矩形做旋转即可

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress