Question

我的html中有一张我带有ID的图片：

<img id={{idImage}} ng-src="http://localhost:3000/images/{{idImage}}"/>

我在我的一个范围内有一些坐标（x，y，w，h）。

在我的控制器中：

$scope.coordinate;

但我不知道如何根据坐标在图像上绘制画布。

感谢您的帮助！

Answer 1

类似以下简单示例。

var drawingCanvas = document.getElementById($scope.idImage);
var context = drawingCanvas.getContext('2d');

$scrope.draw = function() {
context.drawImage($scope.idImage, $scope.coordinate.x, $scope.coordinate.y, $scope.coordinate.w, $scope.coordinate.h);
}

Fiddle JS Example #1 Fiddle JS Example #2

画布上的画画并没有什么特别之处，因为你正在使用棱角分明。

这里有一些很好的例子：Draw HTML5 Canvas

AngularJS使用画布在图像上书写

1 个答案: