Question

我一直在使用2个画布构建一个有2种颜色的圆圈（以显示进度）

为了便于计算填充弧所需的百分比，我想将它的起始位置移动到1.5PI，但使其像0PI一样

我认为这样可以解决问题：

context.rotate（Math.PI * 1.5）我想要抵消1.5PI或240度。

这不起作用，给我一个奇怪的结果。

Ok

Answer 1

如果您更习惯，请将画布视为...画布或纸张，

你要求它从原点（默认情况下，左上角）旋转x弧度。这个原点不是你弧线的中心，因此你的圆圈（可以被认为是你手中的钢笔）是偏移的。

var angle = 0;

var context = canvas.getContext('2d');
// move back from our canvas so we can see what we are doing
context.translate(canvas.width / 2, canvas.height / 2);
context.scale(.25, .25);

function draw() {
  // we need to multiply since we scaled down the canvas
  context.clearRect(-canvas.width * 2, -canvas.height * 2, canvas.width * 4, canvas.height * 4);
  // save the current sate of the context
  context.save();
  // here we rotate from the origin 0,0, the top-left corner
  context.rotate(angle);
  context.strokeStyle = '#000000';
  // draw the border of our canvas
  context.strokeRect(0, 0, canvas.width, canvas.height);

  var x = canvas.width / 2;
  var y = canvas.height / 2;
  var endAngle = 1.5 * Math.PI;
  context.beginPath();

  context.lineWidth = 15;
  context.strokeStyle = 'red';
  // as mentionned by @markE, we were leaking off the canvas
  var radius = 75 - (context.lineWidth / 2);
  context.arc(x, y, radius, 0, angle, false);

  context.stroke();
  // restore our context
  context.restore();
}

draw();

inp.oninput = inp.onchange = function() {
  angle = (2 * Math.PI * this.value) / 100;
  draw();
}

canvas {
  background: ivory;
}

<input id="inp" type="range" min="0" max="100" value="0" /><br>
<canvas id="canvas"></canvas>

您需要的是在旋转之前将原点指向弧的中心：

var angle = 0;

var context = canvas.getContext('2d');

function draw() {

  context.clearRect(0, 0, canvas.width, canvas.height);

  context.save();

  // the center of your arc
  var x = canvas.width / 2;
  var y = canvas.height / 2;
  // we modify the context's origin point
  context.translate(x, y);
  // here we rotate from the center of your circle
  context.rotate(angle);
  // we set the origin point back to the top left-corner
  context.translate(-x, -y);
  // note we could also have drawn our arc directly with
  // ctx.arc(0, 0, radius, sAngle, eAngle);

  // draw the border of our canvas
  context.strokeRect(0, 0, canvas.width, canvas.height);

  var endAngle = 1.5 * Math.PI;
  context.lineWidth = 15;
  context.strokeStyle = 'red';
  // as mentionned by @markE, we were leaking off the canvas
  var radius = 75 - (context.lineWidth / 2);
  context.beginPath();
  context.arc(x, y, radius, 0, angle, 0);

  context.stroke();

  // restore our context
  context.restore();
}

draw();

inp.oninput = inp.onchange = function() {
  angle = (2 * Math.PI * this.value) / 100;
  draw();
}

canvas {
  background: ivory;
}

<input id="inp" type="range" min="0" max="100" value="0" /><br>
<canvas id="canvas"></canvas>

但你会注意到你的整个弧也是旋转的，并且在绘制弧_{时无法旋转你的上下文（除了使用arcTo方法和更多的计算）}

所以最简单的方法是不要旋转您的上下文，arc()方法有startAngle和endAngle参数，请使用它：

var angle = 0;

var context = canvas.getContext('2d');

function draw() {

  context.clearRect(0, 0, canvas.width, canvas.height);
  var x = canvas.width / 2;
  var y = canvas.height / 2;

  var offset = 1.5 * Math.PI;

  context.beginPath();
  var start = offset;
  var end = angle + offset;

  context.lineWidth = 15;
  context.strokeStyle = 'red';
  // as mentionned by @markE, we were leaking off the canvas
  var radius = 75 - (context.lineWidth / 2);
  context.arc(x, y, radius, start, end);

  context.stroke();

  context.restore();
}

draw();

inp.oninput = inp.onchange = function() {
  angle = (2 * Math.PI * this.value) / 100;
  draw();
}

canvas {
  background: ivory;
}

<input id="inp" type="range" min="0" max="100" value="0" /><br>
<canvas id="canvas"></canvas>

画布弧偏移从1.5PI开始

1 个答案: