Paint coursework — различия между версиями

  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,  которая удаляет материал со всего холста.