Question

我想使用arcTo方法沿大圆的圆周绘制几个不同颜色的弧。

请参阅我的codepen here

$(document).ready(() => {
   let canvas = $('#canvas')[0];
   let ctx = canvas.getContext('2d');

   //draw a point on the canvas, optional radius and colour
   const drawPoint = (point, radius, colour) => {
      let col = colour || 'black';
      let r = radius || 2;
      ctx.beginPath();
      ctx.arc(point.x, point.y, r, 0, Math.PI * 2, true);
      ctx.fillStyle = col;
      ctx.fill();
   }

   //draw an arc on the canvas using arcTo, optional colour
   const drawArc = (p1, p2, p3, r,colour) => {
     let col = colour || 'black';
     ctx.beginPath();
     ctx.moveTo(p1.x, p1.y);
     ctx.arcTo(p3.x, p3.y, p2.x, p2.y, r);
     ctx.strokeStyle = col;
     ctx.stroke();
   }

  ctx.translate(window.innerWidth/2, window.innerHeight/3);

  //circle radius and path have been calculated by another function
  let c = {x: 1052.5390625, y: 506.8760978034711};
  let radius = 1096.702150363923;
  ctx.beginPath();
  ctx.arc(c.x,c.y,radius, 0, Math.PI*2)
  ctx.strokeStyle = 'black';
  ctx.stroke();

 //now I want to draw several arcs of different lengths and colours on this circle

 //Heres the first arc 
 //(again points on the circle are calculatedby a different function,     I've entered them manually here)
 let p1 = {x: 288.88884710654133, y: -280.26680862609};
 let p2 = {x: -39.00216443306411 , y: 400.6058925796476};
 let p3 = {x: 0, y: 0};
 drawPoint(p1, 4, 'green');
 drawPoint(p2, 4, 'green');
 drawPoint(p3, 4, 'green');

 drawArc(p1, p2, p3, radius, 'green');

 let q1 = {x: 49.879184148698684, y: 62.546518597442386}
 let q2 = {x: 80, y: 0}
 let q3 = {x: 63.94929512052109, y: 30.796357420674724}

 drawPoint(q1, 4, 'red');
 drawPoint(q2, 4, 'red');
 drawPoint(q3, 4, 'red');

 drawArc(q1, q2, q3, radius, 'red');

});

有一个大的黑色圆圈，然后是一个带有三个绿色控制点的大绿色弧形，以及一个带有红色控制点的较小的红色圆弧。

在Firefox中，它的工作正常，所有弧线都以大屏幕尺寸排列Chrome（好吧，Chromium）。

Chromium Version 47.0.2526.106 Ubuntu 15.10（64-bit）

Canvas arcTo方法在Chrome中绘制不一致的弧

0 个答案: