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

Posted 2023-03-25

【中文标题】在 Angular.js 上的 HTML5 Canvas 中的背景图像上绘制一个矩形

【英文标题】：Draw a rectangle over a background image in HTML5 Canvas on Angular.js

【发布时间】：2019-11-03 03:40:41

【问题描述】：

我想使用 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 代码。

【参考方案1】：

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

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

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

【讨论】：

但我不希望任何按钮调用该函数。不使用按钮可以做到吗？

是的，按钮只是一个插图。只要你把它赋值给$scope，你就可以从任何地方在画布上画画