Пустые места в канве

234
24 января 2017, 21:30

Здравствуйте. Работаю над скриптом несколько часов, и если честно, рационально мыслить уже не способен.

Откуда ни возьмись начали появляться пустые места. Кто знает, в чём проблема?

var game = { 
  canvas: null, 
  ctx: null, 
  centerX: null, 
  centerY: null, 
 
  init: function() { 
    this.canvas = document.getElementById("game"); 
    this.ctx = this.canvas.getContext("2d"); 
 
    this.centerX = this.canvas.width / 2; 
    this.centerY = this.canvas.height / 2; 
 
    this.circle.init(); 
  }, 
 
  circle: { 
    params: { 
      R: 100, 
 
      user_stroke_width: 25, 
 
      anim_speed: 500 
    }, 
 
    colors: [ 
      "red", 
      "blue", 
      "green", 
      "yellow" 
    ], 
 
    clear: function() { 
      var ctx = game.ctx; 
 
      ctx.save(); 
 
      ctx.setTransform(1, 0, 0, 1, 0, 0); 
      ctx.clearRect(0, 0, game.canvas.width, game.canvas.height); 
 
      ctx.restore(); 
    }, 
 
    init: function() { 
      var 
        ctx = game.ctx; 
      endingAngle = 0; 
 
      for (var i = 0; i < game.bets.users.length; i++) { 
        var bets_user = game.bets.users[i]; 
 
        if (i > 0 && !game.bets.users[i - 1].finished) { 
          continue; 
        } 
 
        if (bets_user.angle.start < bets_user.angle.max) { 
          ctx.beginPath(); 
 
          startingAngle = bets_user.angle.start * Math.PI; 
          endingAngle = (bets_user.angle.start + this.params.set) * Math.PI; 
 
          if (endingAngle / Math.PI > 2) { 
            endingAngle = 2 * Math.PI; 
          } 
 
          ctx.arc(game.centerX, game.centerY, this.params.R, startingAngle, endingAngle, false); 
 
          ctx.lineWidth = this.params.user_stroke_width; 
          ctx.strokeStyle = this.colors[i]; 
          ctx.stroke(); 
 
          bets_user.angle.start += this.params.set; 
        } else { 
          bets_user.finished = true; 
        } 
      } 
 
      if (!bets_user.finished) { 
        setTimeout(function() { 
          game.circle.init(); 
        }, 1); 
      } 
    } 
  }, 
 
  bets: { 
    all: 0, 
 
    users: [{ 
      size: 20 
    }, { 
      size: 24 
    }, { 
      size: 134 
    }, { 
      size: 34 
    }], 
 
    set_all: function() { 
      for (var i = 0; i < this.users.length; i++) { 
        this.all += this.users[i].size; 
      } 
 
      game.circle.params.set = 2 / game.circle.params.anim_speed * 4; 
    }, 
 
    config: function() { 
      this.set_all(); 
 
      for (var i = 0; i < this.users.length; i++) { 
        var portion = 100 / this.all * this.users[i].size; 
 
        this.users[i].radians = portion / 100 * 2; 
 
        var start_angle = i == 0 ? 0 : this.users[i - 1].angle.max; 
 
        this.users[i].angle = { 
          start: start_angle, 
          max: start_angle + this.users[i].radians 
        } 
      } 
    } 
  } 
} 
 
window.addEventListener("load", function() { 
  game.bets.config(); 
  game.init(); 
}, false);
<canvas id="game" width="225" height="225"></canvas>

Answer 1

Проблема в lineCap. Как я понимаю, значение по умолчанию butt создает секции, по размеру недостаточные для перекрытия друг друга, образуя зазоры. К сожалению, используя варианты с round и square не удается получить приемлемый результат.

READ ALSO
Broadcast message in IRC Client (chatbot) C#

Broadcast message in IRC Client (chatbot) C#

Здравствуйте, пишу IRC клиент, для общения с внутренним сервером IRC твича и столкнулся с такой проблемой: не работает запрос к серверу с многострочным...

406
Возникли вопросы по Metadata в MEF

Возникли вопросы по Metadata в MEF

Немного не понял, как работает Metadata в MEF

351
Конфигурирование плагина MEF

Конфигурирование плагина MEF

Подскажите, может ли хост при загрузке плагина передать в него какую-то информацию или при создании используется только конструктор по умолчанию?

386
Как стиль ContextMenuMy установить к MenuItem из кода?

Как стиль ContextMenuMy установить к MenuItem из кода?

Как стиль ContextMenuMy установить к MenuItem из кода?

312