Как с помощью canvas нарисовать треугольник?

Question

[maksimkoh]

Всем привет, есть скрипт, на нем анимация фигур - кругов и плюсов:
Как сделать вместо плюсов треугольники?

Хотелось бы получить вот такие треугольники:


Превью скрипта:
maksimkokhtenko.com/demo/wipe
Сам скрипт:

<script>
		var Canvas = document.getElementById('canvas');
		var ctx = Canvas.getContext('2d');

		var resize = function() {
		    Canvas.width = Canvas.clientWidth;
		    Canvas.height = Canvas.clientHeight;
		};
		window.addEventListener('resize', resize);
		resize();

		var elements = [];
		var presets = {};

		presets.o = function (x, y, s, dx, dy) {
		    return {
		        x: x,
		        y: y,
		        r: 12 * s,
		        w: 5 * s,
		        dx: dx,
		        dy: dy,
		        draw: function(ctx, t) {
		            this.x += this.dx;
		            this.y += this.dy;
		            
		            ctx.beginPath();
		            ctx.arc(this.x + + Math.sin((50 + x + (t / 10)) / 100) * 100, this.y + + Math.sin((45 + x + (t / 10)) / 100) * 4, this.r, 0, 2 * Math.PI, false);
		            ctx.lineWidth = this.w;
		            ctx.strokeStyle = '#ea4f87';
		            ctx.stroke();
		        }
		    }
		};

		presets.x = function (x, y, s, dx, dy, dr, r) {
		    r = r || 0;
		    return {
		        x: x,
		        y: y,
		        s: 20 * s,
		        w: 5 * s,
		        r: r,
		        dx: dx,
		        dy: dy,
		        dr: dr,
		        draw: function(ctx, t) {
		            this.x += this.dx;
		            this.y += this.dy;
		            this.r += this.dr;
		            
		            var _this = this;
		            var line = function(x, y, tx, ty, c, o) {
		                o = o || 0;
		                ctx.beginPath();
		                ctx.moveTo(-o + ((_this.s / 2) * x), o + ((_this.s / 2) * y));
		                ctx.lineTo(-o + ((_this.s / 2) * tx), o + ((_this.s / 2) * ty));
		                ctx.lineWidth = _this.w;
		                ctx.strokeStyle = c;
		                ctx.stroke();
		            };
		            
		            ctx.save();
		            
		            ctx.translate(this.x + Math.sin((x + (t / 10)) / 100) * 5, this.y + Math.sin((10 + x + (t / 10)) / 100) * 50);
		            ctx.rotate(this.r * Math.PI / 180);
		            
		            line(-1, -1, 1, 1, '#7533f1');
		            line(1, -1, -1, 1, '#7533f1');
		            
		            ctx.restore();
		        }
		    }
		};

		for(var x = 0; x < Canvas.width; x++) {
		    for(var y = 0; y < Canvas.height; y++) {
		        if(Math.round(Math.random() * 8000) == 1) {
		            var s = ((Math.random() * 5) + 1) / 10;
		            if(Math.round(Math.random()) == 1)
		                elements.push(presets.o(x, y, s, 0, 0));
		            else
		                elements.push(presets.x(x, y, s, 0, 0, ((Math.random() * 3) - 1) / 10, (Math.random() * 360)));
		        }
		    }
		}

		setInterval(function() {
		    ctx.clearRect(0, 0, Canvas.width, Canvas.height);

		    var time = new Date().getTime();
		    for (var e in elements)
				elements[e].draw(ctx, time);
		}, 10);
	</script>

Answer 1

[Tenebrius]

Если вкратце:

ctx.beginPath();
ctx.moveTo(x11, y11); // первая внешняя точка
ctx.lineTo(x12, y12); //вторая внешняя точка
ctx.lineTo(x13, y13); //третья внешняя точка
ctx.lineTo(x21, y21); //первая внутренняя точка
ctx.lineTo(x22, y22); //вторая внутренняя точка
ctx.lineTo(x23, y23); //третья внутренняя точка
ctx.fill();

Рисуется внешний треугольник (обходим по часовой стрелке), рисуется внутренний треугольник (против часовой), заливаем цветом.

пример: https://jsfiddle.net/08z79pje/

Comments

[Adamos]

Вот только ваши команды этого не делают. Вы рисуете по две линии каждого треугольника, да еще и соединяя их между собой.

[Tenebrius]

Adamos: https://jsfiddle.net/08z79pje/

[Adamos]

Tenebrius: ну, так поправьте пятую команду в ответе.
И я, работая с разными форматами векторной графики, привык не полагаться на то, что разомкнутая фигура будет замкнута. Предпочитаю делать это самостоятельно, чтобы не ловить неожиданные сюрпризы.

[Максим]

Tenebrius: всё прилично и красиво и по сути вопроса , чем ТС не доволен ?