画布圆弧偏移从 1.5PI 开始

Question

我一直在使用 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();                 

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>