Javascript 使用Angular.js在画布上绘制

我试图在用户使用angular on canvas在屏幕上单击的任何位置绘制一个圆。我的代码似乎不起作用。 这是我的护照

---

非常感谢您的帮助。

所以这里的问题是不能正确使用画布

您需要添加一个ID、类或目标所有画布元素，在本例中，我向画布元素添加了一个ID，这样我就可以使用document.getElementById将其作为目标

<canvas id="canvas" ng-click="doClick($event)" width="600" height= "600"></canvas>

---

我仍然建议将此代码放在服务中。

尝试将其放在服务中，服务可以更好地使用香草javascript。我尽量不使用香草javascript。我不知道angularI out box是否有任何简洁的画布实用程序，你可能需要在浏览器中查看你想要的angular模块列表。从代码的外观来看，你没有正确使用画布。您需要使用document.getElementById或其他东西，并将其绑定到getContext中的ctx。因此，我让您的代码正常工作，我将发布答案。此代码似乎正常工作，但它没有在我单击的位置绘制圆。在下面画一点。另外，我对angular中的服务也不太了解。这是一个真正具有前端技术的noob。有关鼠标位置的答案，请查看本页：

<canvas id="canvas" ng-click="doClick($event)" width="600" height= "600"></canvas>

$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, 10, 0, Math.PI*2, true); 
  ctx.closePath();
  ctx.fill();

};