Javascript 使用画布连接多个圆

我正在尝试编写一个程序，当用户第一次点击时，它会在屏幕上画一个圆圈，然后每次连续点击它都会画另一个圆圈，并用一条直线将第一个圆圈连接到新的圆圈。我有点被困在基于用户点击绘制圆圈之外

这是我的密码

var app = angular.module('plunker', []);

app.controller('MainController', function($scope) {
  //alert("test");
 $scope.doClick = function(event){

 var x = event.clientX;
 var y = event.clientY;
 var offsetX = event.offsetX;
 var offsetY = event.offsetY;
 //alert(x, y, offsetX, offsetY);

 /// These are the 2 new lines, see you target the canvas element then apply it to getContext
 var canvasElement = document.getElementById("canvas");
 var ctx = canvasElement.getContext("2d");

  //draw a circle
  ctx.beginPath();
  ctx.arc(x, y, 5, 0, Math.PI*2, true); 
  ctx.closePath();
  ctx.fill();

};


});

这是plnk的链接

---

感谢您的帮助

您已经很好地绘制了圆……下面是连接线的方法

您可以使用合成在先前绘制的内容下绘制连接线

尤其是

ctx.globalCompositeOperation='destination-over'

将导致在先前绘制的圆（和线）下绘制新的连接线

下面是示例代码和演示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
函数reOffset（）{
var BB=canvas.getBoundingClientRect（）；
offsetX=BB.left；
offsetY=BB.top；
}
var offsetX，offsetY；
reOffset（）；
onscroll=函数（e）{reOffset（）；}
var isDown=假；
var startX，startY；
var半径=10；
var lastX，lastY；
ctx.fillStyle='red'；
$（“#canvas”）.mousedown（函数（e）{handleMouseDown（e）；}）；
函数drawCircle（cx、cy）{
if（lastX）{
ctx.globalCompositeOperation='destination-over'；
ctx.beginPath（）；
ctx.moveTo（lastX，lastY）；
ctx.lineTo（cx，cy）；
ctx.stroke（）；
ctx.globalCompositeOperation='source-over'；
}
ctx.beginPath（）；
ctx.弧（cx，cy，半径，0，数学PI*2）；
ctx.closePath（）；
ctx.fill（）；
}
功能手柄向下（e）{
//告诉浏览器我们正在处理此事件
e、 预防默认值（）；
e、 停止传播（）；
mx=parseInt（e.clientX-offsetX）；
my=parseInt（e.clientY-offsetY）；
drawCircle（mx，my）；
lastX=mx；
拉蒂=我的；
}

body{背景色：象牙；}
#画布{边框：1px纯红；}

单击画布以绘制连接的圆

这几乎可以做到，它只需要所有新的圆圈就可以连接到第一个圆圈。不相互连接。仅连接到第一个圆圈实际上比原始演示更简单。请参阅我的答案，第二个演示将所有内容连接到第一个圆圈。祝你的项目好运！很抱歉，我找不到将所有这些连接到第一个圆圈的答案。无论如何，非常感谢。这是底部代码…在[添加了所有新圆圈连接到第一个圆圈的示例]；-）这在您的演示上看起来很神奇，但在我的plnkr上给出了稍微不同的行为。