画布HTML 5在一行的每一端绘制圆圈？

Question

编辑：我想出一个解决方案http://jsfiddle.net/rwuvnrau/1我应该关闭还是会有用？

我正在玩画布，我正在网站上尝试一条有趣的线。

我开始弄清楚bezierCurveTo函数是如何工作的，我仍然需要对它进行一些改进，但作为一个设计概念，我想绘制有界的圆圈（没有中间，类似于聊天和在线的每个点的末尾播放下面屏幕中的图标。

我不知道如何解决这个问题，我唯一能想到的是因为我知道P0位置context.moveTo(850, 0); 850我可以在那个坐标处绘制圆圈

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  canvas.width = 970;
  canvas.height = 600;

  context.beginPath();
  context.moveTo(850, 0);
  context.bezierCurveTo(850, 378, 0, 185, 3, 492);
  context.lineWidth = 2;

  // line color
  context.strokeStyle = '#4285f4';
  context.stroke();

已经过了一段时间，但我想创建一个新对象，我可以context.beginPath()然后构建一个圆圈。我需要研究这个并做一个小提琴，但我希望有人可以帮我快点。

FIDDLE

Answer 1

所以我不应该先试着问，但我对自己的画布技巧并不自信。对某些人来说，这可能会派上用场。

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 10;



  canvas.width = 970;
  canvas.height = 600;

  // curved line
  context.beginPath();
  context.moveTo(850, 100);
  context.bezierCurveTo(850, 378, 0, 185, 3, 492);
  context.lineWidth = 2;

  // line color
  context.strokeStyle = '#4285f4';
  context.stroke();

  // circle
  context.beginPath();
  context.arc(850, 90, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'transparent';
  context.fill();
  context.lineWidth = 2;
  context.strokeStyle = '#4285f4';
  context.stroke();

Canvas真的是关于数学的，并且知道对象的坐标。因为我知道我的线的起点在x轴上是850px我可以context.arc(850, 90, radius, 0, 2 * Math.PI, false); y轴是90的圆，因为我的起点的y轴是100，半径是10。

在我的代码版本中，我没有考虑笔画宽度，所以在你的等式中添加2px，在我的网站上运行正常，不知道我是否想通过lol来实现它。