Question

我试图在用户使用角度画布点击屏幕时绘制圆圈。我的代码似乎无法正常工作。这是我的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";
});

任何帮助表示感谢。

Answer 1

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

你需要添加一个ID，类或目标所有画布元素，在这种情况下，我添加了一个ID到canvas元素，这样我可以用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.js在画布上绘图

1 个答案: