javascript - Canvas 弧偏移从1.5PI开始

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

为了简化填充圆弧上所需百分比的计算，我想将其起始位置移至1.5PI，但使其表现得像0PI

我认为这可以解决问题：

context.rotate（Math.PI * 1.5）
 我想补偿1.5PI或240度。

这没有用，给了我一个奇怪的结果。

// Filler
var canvas = document.getElementById('canvas_<?php echo $champions_['champion_id'];?>');
var context = canvas.getContext('2d');
context.rotate(1.5*Math.PI )
var x = canvas.width / 2;
var y = canvas.height / 2;
var endAngle = 1.5 * Math.PI;
context.beginPath();
context.arc(x, y, 75, 0,<?php echo $percentage*2;?> * Math.PI, false);
context.lineWidth = 15;
// line color
context.strokeStyle = '<?php echo $second_colour;?>';
context.stroke();
//Base
var canvas = document.getElementById('canvas_main_<?php echo $champions_['champion_id'];?>');
var context = canvas.getContext('2d');
context.beginPath();
context.arc((canvas.width / 2), (canvas.height / 2), 75, 2 * Math.PI, false);
context.lineWidth = 15;
// line color
context.strokeStyle = '<?php echo $base_colour;?>';
context.stroke();

最佳答案

如果您比较习惯将画布视为...画布或纸张，

您要它从原点（默认为左上角）旋转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方法和更多的计算）。

因此，最简单的方法是不旋转上下文，在startAngle方法中有endAngle和arc()参数，请使用它：

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>