Показать сообщение отдельно
  #1 (permalink)  
Старый 08.08.2021, 20:07
Новичок на форуме
Отправить личное сообщение для DedPyhto Посмотреть профиль Найти все сообщения от DedPyhto
 
Регистрация: 08.08.2021
Сообщений: 2

Неправильно отображается цвет в 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);
Ответить с цитированием