forked from trpomoais2017/fg01-snowflake
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
57 lines (57 loc) · 3.62 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!doctype html>
<html>
<body>
<script>
/*============================================================================================*/
function PaintSnowflake(){
var iteration = document.getElementById('iteration');
var n = iteration.value;
var canvas = document.getElementById("canvas");
var canvasHeight = parseInt(canvas.getAttribute("height"));
var canvasWidth = parseInt(canvas.getAttribute("width"));
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.lineWidth = "2";
context.strokeStyle = "black";
var points = [{x: 100, y: 200}, {x: 600, y: 200}, {x: 0, y: 0}];
//вычисление координат третьей точки равностороннего трекгольника
points[2].x = (points[1].x-points[0].x)*Math.cos(Math.PI/3) - (points[1].y-points[0].y)*Math.sin(Math.PI/3) + points[0].x;
points[2].y = (points[1].x-points[0].x)*Math.sin(Math.PI/3) + (points[1].y-points[0].y)*Math.cos(Math.PI/3) + points[0].y;
DrawCochLine(context, points[1], points[0], Math.PI, n);
DrawCochLine(context, points[2], points[1], -Math.PI/3, n);
DrawCochLine(context, points[0], points[2], Math.PI/3, n);
}
/*============================================================================================*/
//firstPoint - первая точка отрезка
//secondPoint - вторая точка отрезка
//fi - угол поворота отрезка
//n - кол-во итераций
function DrawCochLine(context, firstPoint, secondPoint, fi, n){
if (n <= 0){
context.beginPath();
context.moveTo(firstPoint.x, firstPoint.y);
context.lineTo(secondPoint.x, secondPoint.y);
context.stroke();
} else {
var length = Math.sqrt(Math.pow(secondPoint.y - firstPoint.y, 2) + Math.pow(secondPoint.x - firstPoint.x, 2));
var third = length / 3;
//находим точку, находящуюся на 1/3 длины отрезка от первой точки
var newPoint1 = {x: firstPoint.x + parseInt(Math.round(third * Math.cos(fi))), y: firstPoint.y + parseInt(Math.round(third * Math.sin(fi)))};
//находим точку, находящуюся на 2/3 длины отрезка от первой точки
var newPoint2 = {x: newPoint1.x + parseInt(Math.round(third * Math.cos(fi))), y: newPoint1.y + parseInt(Math.round(third*Math.sin(fi)))};
//находим вершину нового треугольника
var peak = {x: newPoint1.x + parseInt(Math.round(third * Math.cos(fi + Math.PI/3))), y: newPoint1.y + parseInt(Math.round(third * Math.sin(fi + Math.PI/3)))};
n--;
DrawCochLine(context, newPoint1, peak, fi + Math.PI/3, n);
DrawCochLine(context, peak, newPoint2, fi - Math.PI/3, n);
DrawCochLine(context, firstPoint, newPoint1, fi, n);
DrawCochLine(context, newPoint2, secondPoint, fi, n);
}
}
/*============================================================================================*/
</script>
<button onclick="PaintSnowflake();">Построить</button>
<input type="text" class="form-control" name="iteration" id="iteration" placeholder="Сколько итераций">
<canvas height='700' width='1000' id='canvas'></canvas>
</body>
</html>