| DedPyhto | 08.08.2021 20:07 |
Неправильно отображается цвет в canvas
Здравствуйте. Предполагалось, что при выполнении такого кода будут последовательно нарисованы синий круг, зеленый квадрат и розовый овал. Но почему-то круг заливается тоже розовым цветом. При том что даже рисуется первым по ходу выполнения кода. Подскажите, пожалуйста, что в коде не так, как добиться правильного цвета?
Код:
var cnv = document.getElementById('canvas');
var ctx = cnv.getContext('2d');
function drawFig(type, color, coordX, coordY, size, angle){
if(type=="square"){
size = size*4/5;
ctx.save(); // сохраняем стейт контекста
ctx.translate(coordX, coordY); //
ctx.rotate(angle);
ctx.fillStyle = color;
ctx.fillRect(-size/2, -size/2, size, size);
ctx.restore();
}
else if(type=="circle"){
ctx.arc(coordX, coordY, size/2, 0, Math.PI*2, true);
ctx.fillStyle = color;
ctx.fill();
}
else if(type=="ellipse"){
ctx.save();
ctx.translate(coordX, coordY);
ctx.rotate(angle);
ctx.scale(1, 2);
ctx.arc(0, 0, size/3, 0, Math.PI*2);
ctx.restore();
ctx.fillStyle = color;
ctx.fill();
}
}
drawFig("circle", "blue", 150, 150, 20, 0.5);
drawFig("square", "green", 200, 150, 20, 0.5);
drawFig("ellipse", "pink", 250, 150, 20, 0.5);