使用 Angular.js 在画布上绘图答案

【问题标题】：Drawing on a canvas using Angular.js使用 Angular.js 在画布上绘图
【发布时间】：2015-04-11 15:51:59
【问题描述】：

我正在尝试使用画布上的角度在用户单击屏幕的任何位置绘制一个圆圈。我的代码似乎不起作用。这是我的plnk

http://plnkr.co/edit/rYVLgB14IutNh1F4MN6T?p=preview

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);

      //console.log(x, y, offsetX, offsetY);

      var ctx = getContext("2d");

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

  $scope.test="test";
});

任何帮助表示赞赏。

【问题讨论】：

尝试把它放到服务中，服务可以更好地使用原生 javascript。
我试图不使用原版 javascript。你能建议一种纯粹角度的方法吗
我不知道 Angular 开箱是否有任何整洁的画布实用程序，您可能需要浏览器查看所需的 Angular 模块列表。
从你的代码看起来你没有正确使用画布。您需要使用 document.getElementById 或其他东西并将其绑定到 getContext 中的 ctx。
所以我得到了你的代码，我会发布答案。

标签： javascript angularjs canvas

【解决方案1】：

所以这里的问题是没有正确使用画布。

您需要添加一个 ID、Class 或定位所有画布元素，在这种情况下，我向您的画布元素添加了一个 ID，这样我可以使用 document.getElementById 定位它

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

在您的 javascript 中，您并没有针对 canvas 元素并将上下文应用到它。

这就是你的新 doubleCLick 函数的样子：

$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();

};

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

【讨论】：

这段代码似乎可以工作，但它并没有在我点击的地方画出圆圈。下面稍微画一下。另外，我对 Angular 中的服务真的不太了解。真是个前端技术的菜鸟。
并查看此页面以获取有关鼠标位置的答案：stackoverflow.com/questions/1114465/…