Paint coursework
Материал из Department of Theoretical and Applied Mechanics
Работу выполнили студентки гр. 3630103/00003 Алексеева Мария, Арбузова Елизавета, Москвина Ксения.
Код программы[править]
Код программы на языке JavaScript:
1 Описание кода JavaScript:
2
3 window.addEventListener('load', main, false);
4 var color = "#000000";
5 function main() {
6 var ctx = canvas_example.getContext('2d')
7 var w = canvas_example.width
8 var h = canvas_example.height
9 var r = 10
10 var x = 0
11 var y = 0
12 var colorPicker = document.getElementById('colorpick')
13 var getcolor = document.getElementById('getcolor')
14 var cos = Math.cos(Math.PI/6)
15 var sin = Math.sin(Math.PI/6)
16 var bool = false;
17 var draw = false;
18 ctx.fillStyle = '#ffffff';
19 ctx.fillRect(0,0,w,h);
20 colorPicker.addEventListener("input", function() {
21 document.getElementById('c8').style.backgroundColor = colorPicker.value //пример считывания, передавать через value
22 });
23 При нажатии на кнопку все фигуры на холсте будут отображены с заливкой.
24 b7.onclick = function() {
25 bool = !bool;
26 }
27
28
29 При запуске функции нажатием на кнопку пользователь может нарисовать мышкой кривую, которая будет отображаться на холсте по мере продвижения мышки.
30 b4.onclick = function() {
31 ctx.lineWidth = document.getElementById('size').value;
32 ctx.strokeStyle = colorPicker.value;
33 canvas_example.onmousedown = function(event){
34 var x = event.offsetX;
35 var y = event.offsetY;
36 draw = true;
37 ctx.beginPath();
38 ctx.moveTo(x, y);
39 }
40 canvas_example.onmousemove = function(event){
41 if(draw==true){
42 var x = event.offsetX;
43 var y = event.offsetY;
44 ctx.lineTo(x, y);
45 ctx.stroke();
46 }
47 }
48 canvas_example.onmouseup = function(event){
49 var x = event.offsetX;
50 var y = event.offsetY;
51 ctx.lineTo(x, y);
52 ctx.stroke();
53 ctx.closePath();
54 draw = false;
55 }
56 }
57 При запуске функции нажатием на кнопку пользователь стирает рисунок по месту проведения мышки.
58 b8.onclick = function() {
59 ctx.lineWidth = document.getElementById('size').value;
60 ctx.strokeStyle = 'white';
61 canvas_example.onmousedown = function(event){
62 var x = event.offsetX;
63 var y = event.offsetY;
64 draw = true;
65 ctx.beginPath();
66 ctx.moveTo(x, y);
67 }
68 canvas_example.onmousemove = function(event){
69 if(draw==true){
70 var x = event.offsetX;
71 var y = event.offsetY;
72 ctx.lineTo(x, y);
73 ctx.stroke();
74 }
75 }
76 canvas_example.onmouseup = function(event){
77 var x = event.offsetX;
78 var y = event.offsetY;
79 ctx.lineTo(x, y);
80 ctx.stroke();
81 ctx.closePath();
82 draw = false;
83 }
84 }
85
86 b3.onclick = function() {
87 canvas_example.onmousedown = function(event){
88 var x = event.offsetX;
89 var y = event.offsetY;
90 var imageData = ctx.getImageData(0, 0, w, h);
91 canvas_example.onmousemove = function(event){
92 ctx.lineCap = "round";
93 ctx.putImageData(imageData, 0, 0);
94 var x1 = event.offsetX;
95 var y1 = event.offsetY;
96 ctx.beginPath();
97 ctx.lineWidth = document.getElementById('size').value;
98 ctx.strokeStyle = colorPicker.value;
99 ctx.fillStyle = colorPicker.value;
100 var r = Math.sqrt((x-x1)*(x-x1)+(y-y1)*(y-y1))
101 ctx.arc(x, y, r, 0, 2*Math.PI);
102 if (bool) {
103 ctx.fill();
104 } else {
105 ctx.stroke();
106 }
107 canvas_example.onmouseup = function(event) {
108 canvas_example.onmousemove = function() {}
109 }
110 }
111 }
112 }
113 b2.onclick = function() {
114 canvas_example.onmousedown = function(event){
115 var x = event.offsetX;
116 var y = event.offsetY;
117 var imageData = ctx.getImageData(0, 0, w, h);
118 canvas_example.onmousemove = function(event){
119 ctx.lineCap = "round";
120 ctx.putImageData(imageData, 0, 0);
121 var x1 = event.offsetX;
122 var y1 = event.offsetY;
123 ctx.beginPath();
124 ctx.lineWidth = document.getElementById('size').value;
125 ctx.strokeStyle = colorPicker.value;
126 ctx.fillStyle = colorPicker.value;
127 var r = Math.sqrt((x-x1)*(x-x1)+(y-y1)*(y-y1))
128 ctx.moveTo(x, y);
129 ctx.lineTo(x, y1); // линия вправо
130 ctx.lineTo(x1, y1); // линия вниз
131 ctx.lineTo(x1, y); // линия влево
132 ctx.closePath(); // смыкание начала и конца рисунка
133 if (bool) {
134 ctx.fill();
135 } else {
136 ctx.stroke();
137 }
138 canvas_example.onmouseup = function(event) {
139 canvas_example.onmousemove = function() {}
140 }
141 }
142 }
143 }
144
145 b5.onclick = function() {
146 canvas_example.onmousedown = function(event){
147 var x0 = event.offsetX;
148 var y0 = event.offsetY;
149 var imageData = ctx.getImageData(0, 0, w, h);
150 canvas_example.onmousemove = function(event){
151 ctx.putImageData(imageData, 0, 0);
152 ctx.lineCap = "round";
153 var x1 = event.offsetX;
154 var y1 = event.offsetY;
155 ctx.beginPath();
156 ctx.lineWidth =
157 document.getElementById('size').value;
158 ctx.strokeStyle = colorPicker.value;
159 ctx.fillStyle = colorPicker.value;
160 ctx.moveTo(x0, y0);
161 ctx.lineTo(x1, y0);
162 ctx.lineTo((x0+x1)/2, y1);
163 ctx.lineTo(x0, y0);
164 if (bool) {
165 ctx.fill();
166 } else {
167 ctx.stroke();
168 }
169 canvas_example.onmouseup = function(event) {
170 canvas_example.onmousemove = function() {}
171 }
172 }
173 }
174 }
175 b1.onclick = function() {
176 canvas_example.onmousedown = function(event){
177 var x = event.offsetX;
178 var y = event.offsetY;
179 var imageData = ctx.getImageData(0, 0, w, h);
180 canvas_example.onmousemove = function(event){
181 ctx.putImageData(imageData, 0, 0);
182 ctx.lineCap = "round";
183 var x1 = event.offsetX;
184 var y1 = event.offsetY;
185 ctx.beginPath();
186 ctx.lineWidth =
187
188 document.getElementById('size').value;
189 ctx.strokeStyle = colorPicker.value;
190 ctx.moveTo(x, y);
191 ctx.lineTo(x1, y1);
192 ctx.stroke();
193 canvas_example.onmouseup = function(event) {
194 canvas_example.onmousemove = function() {}
195 }
196 }
197 }
198 }
199 b6.onclick = function() {
200 canvas_example.onmousedown = function(event){
201 var x = event.offsetX;
202 var y = event.offsetY;
203 var imageData = ctx.getImageData(0, 0, w, h);
204 canvas_example.onmousemove = function(event){
205 ctx.putImageData(imageData, 0, 0);
206 ctx.lineCap = "round";
207 var x1 = event.offsetX;
208 var y1 = event.offsetY;
209 ctx.beginPath();
210 ctx.lineWidth =
211 document.getElementById('size').value;
212 ctx.strokeStyle = colorPicker.value;
213 ctx.fillStyle = colorPicker.value;
214 var r = Math.sqrt((x-x1)*(x-x1)+(y-y1)*(y-y1))
215 ctx.ellipse(x, y, r, r/2,0, 0, 2*Math.PI);
216 if (bool) {
217 ctx.fill();
218 } else {
219 ctx.stroke();
220 }
221 canvas_example.onmouseup = function(event) {
222 canvas_example.onmousemove = function() {}
223 }
224 }
225 }
226 }
227
228 b9.onclick = function() {
229 ctx.clearRect(0, 0, w, h);
230 }
231 }
232 Функции b1, b2, b3, b5, b6 работают аналогично выше описанным и отображают на холсте различные фигуры, размеры и цвет которых пользователь может задать самостоятельно, исключение составляет b9, которая удаляет материал со всего холста.
