Question

我只是想在画布上制作一个夜空，并以一个有角度的部分使用它，但大约一半的星星疯狂地闪烁。也许我已经疯了，但我无法在代码中找到原因。这是部分：

<div  class="container-fluid" ng-controller="View1Ctrl as v1c">     
<canvas id="canvas"></canvas>
</div>

这是javascript：

angular.module('myApp.view1', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])

.controller('View1Ctrl', [function() {
this.source = 'view1/startest.png';
angular.element(document).ready(function() {
    var width = screen.width;
    var height= screen.height;
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    canvas.width = width;
    canvas.height = height;

    var stars = [];
    var colors = ['#ffffff', '#ffd9cc', '#b3ecff'];

    for (i = 0; i < 600; i++) {
      stars.push({
        locx: Math.floor(Math.random() * width-10) + 1,
        locy: Math.floor(Math.random() * height - 10) + 1,
        radius: Math.random(),
        color: colors[Math.floor(Math.random()*colors.length)]
      });
    };

    function twinkle() {
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, width, height);
      for (i = 0; i < stars.length; i++) {
        var star = stars[i];
        ctx.fillStyle = star.color;
        var changeIndex = Math.floor(Math.random() * 20) + 1;
        ctx.beginPath();
        ctx.arc(star.locx, star.locy, star.radius , 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fill();
      };
    };

    function twinkleLoop() {
      window.setTimeout(twinkleLoop, 20);
        twinkle();
    };

    twinkleLoop();
 });
}]);

任何帮助都非常欢迎！他们被放置在一个动画函数中，这样我最终可以让它们进行动画制作，但是按照我自己的意思，这样就必须保留或者至少只是修改而不是删除。

动画故障与画布和angularjs

0 个答案: