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