在 Angular.js 上的 HTML5 Canvas 中的背景图像上绘制一个矩形

Question

我想使用 angular.js 在画布上的背景图像上绘制一个矩形。我可以通过将矩形代码放在 image.onload 函数中来绘制它。但是我希望它们分开。我该怎么做？

$scope.printStars = function() {
                var c = document.getElementById("myCanvas");
                c.width=1920;
                c.height=1080;

                var ctx = c.getContext("2d");
                ctx.clearRect(0, 0, 800, 800);


                ctx.scale(c.width/1920,c.height/1080);
                ctx.translate(1920-500,0);
                 var imagePaper = new Image();


               imagePaper.onload = function(){


                    ctx.drawImage(imagePaper,100, 20, 500,500);



                };
                ctx.fillRect(20, 20, 200, 200);

                imagePaper.src = "Img/Back1.jpg";





            }

如果我这样做，我的代码就可以工作

 imagePaper.onload = function(){


                    ctx.drawImage(imagePaper,100, 20, 500,500);
                    ctx.fillRect(20, 20, 200, 200);


                };

但我想要图像函数之外的 drawrectangle 代码。

Answer 1

您现在可以将ctx 分配给$scope 上的变量，然后在其他地方访问它。例如：

$scope.drawRectangle = function() {
  $scope.ctx.fillRect(20, 20, 200, 200);
}

<button ng-click=drawRectangle()>Draw rectangle</button>