p5.js rotate()函数旋转结果不符合预期问题咨询

已设置angleMode = DEGREES，取消注释第14行的rotate(180)后，线条旋转至11点钟位置，而非预期的9点钟位置；但使用第15行的rotate(radians(180))时，旋转结果符合预期，请问这是什么原因？

问题代码 #

function setup() {
  createCanvas(200, 200);
  angleMode = DEGREES;
}

function draw() {
  noStroke();
  fill(200, 102, 0);
  circle(100, 100, 180); //draw pivot
  strokeWeight(5);
  stroke(0, 0, 0);
  circle(100, 100, 15); //draw pivot point
  translate(100, 100); //move origin
  // rotate(180);
  //rotate(radians(180));
  line(0, 0, 90, 0);
}

原因分析与解决方法 #

这是因为p5.js的angleMode设置必须在createCanvas()之前执行，你当前把angleMode = DEGREES放在了createCanvas()之后，导致这个设置没有生效，rotate()仍然默认使用弧度制计算。

当传入rotate(180)时，程序会把180当成弧度值（约等于10313度，取模360后是230度左右，对应11点钟方向），自然和预期的180度旋转不符；而rotate(radians(180))是手动把180度转换成了弧度值（π），刚好对应180度旋转，所以结果正确。

解决方法很简单，调整代码顺序，把angleMode = DEGREES移到createCanvas()之前：

function setup() {
  angleMode = DEGREES; // 调整到createCanvas之前
  createCanvas(200, 200);
}

这样rotate(180)就会按照角度制计算，旋转180度到预期的9点钟位置。

内容的提问来源于stack exchange，提问作者DD TECH