Страницы

Поиск по вопросам

суббота, 13 июля 2019 г.

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

Здравствуйте. Работаю над скриптом несколько часов, и если честно, рационально мыслить уже не способен.
Откуда ни возьмись начали появляться пустые места. Кто знает, в чём проблема?
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);


Ответ

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

Комментариев нет:

Отправить комментарий