Computer_Graphics/lab_03.html at master · capsidimit/Computer_Graphics · GitHub

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<html>
    <head>
        <meta charset='utf-8'>
     </head>
  <body>
	  <canvas width='1000', height='1000', id='canvas_1'></canvas>
	<script>
		var canvas = document.getElementById('canvas_1');
        var ctx = canvas.getContext('2d');

		let x0 = 10;
		let y0 = 10;
		let x1 = 160;
		let y1 = 60;

		let scale = 2;

		//Функция line_sec_1 рисует прямую в секторе от -45 до 45 градусов
		function line_sec_1(ctx,x0,y0,x1,y1)
			{
				let deltax = Math.abs(x1-x0);
				let deltay = Math.abs(y1-y0);
				let error = 0;
				let deltaerr = (deltay + 1);

				let y = y0;
				let diry = y1 - y0;

				if (diry > 0)
					{
						diry = 1;
					}
				if (diry < 0)
					{
						diry = -1;
					}
				for(let x = x0 ; x < x1 ; x++)
					{
						ctx.fillRect(x, y, 1*scale, 1*scale);
						error = error + deltaerr;
						if (error > (deltax + 1))
							{
								y = y + diry;
             					error = error - (deltax + 1);
							}
					}
			};
		//Функция line_sec_2 рисует прямую в секторе от -135 до -45 градусов
		function line_sec_2(ctx,x0,y0,x1,y1)
			{
				let deltax = Math.abs(x1-x0);
				let deltay = Math.abs(y1-y0);
				let error = 0;
				let deltaerr = (deltax + 1);

				let x = x0;
				let dirx = x1 - x0;

				if (dirx > 0)
					{
						dirx = 1;
					}
				if (dirx < 0)
					{
						dirx = -1;
					}
				for(let y = y0 ; y < y1 ; y++)
					{
						ctx.fillRect(x, y, 1*scale, 1*scale);
						error = error + deltaerr;
						if (error > (deltay + 1))
							{
								x = x + dirx;
             					error = error - (deltay + 1);
							}
					}
			};

		function function_prepare_draw(ctx,x0,y0,x1,y1)
			{
				ctx.fillStyle="#000000";

				var k=(y1-y0)/(x1-x0); // Вычисляем значение параметра наклона прямой
				// Исходя из её значений, вызываем разные функции.
				if ((k <= 1) && (k >= -1))
					{
						if (x1 < x0)
							{
								line_sec_1(ctx,x1,y1,x0,y0);
							}
						else
							{
								line_sec_1(ctx,x0,y0,x1,y1);
							}
					}
				if ((k < -1) || (k > 1))
					{
						if (y1 < y0)
							{
								line_sec_2(ctx,x1,y1,x0,y0);
							}
						else
							{
								line_sec_2(ctx,x0,y0,x1,y1);
							}
					}
			};

		let point_index = 0;
		canvas.addEventListener('click',function(e){
			if (point_index == 0)
				{
					x0 = e.offsetX;
					y0 = e.offsetY;
					point_index = 1;
				}
			else
				{
					x1 = e.offsetX;
					y1 = e.offsetY;
					point_index = 0;
					function_prepare_draw(ctx,x0,y0,x1,y1);
				}
		});

	</script>
  </body>
</html>