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>

在Angular.js的HTML5画布中的背景图片上绘制一个矩形

1 个答案: