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

  1 /**
  2  * Комментарии к глобальным переменным:
  3  * myColor    - актуальный цвет.
  4  * R          - радиус точки / толщина линии.
  5  * flag       - пока нужен только для нормальной работы функции linedraw (повторное определение точек).
  6  * mode_flag  - для смены режимов.
  7  * defImg     - дефолтный background холста (для очистки холста).
  8  */
  9 var canvas      = document.getElementById('c1');
 10 var ctx         =       canvas.getContext('2d');
 11 var myColor     =                     '#000000';
 12 var R           =                             5;
 13 var defImg      =        new Image('holst.jpg');
 14 var flag                                       ; 
 15 var mode_flag                                  ; 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23  /**
 24   * Начальная заливка холста белым цветом.
 25   */
 26 ctx.fillStyle = "#ffffff";
 27 ctx.fillRect(0,0,900,600);
 28 
 29 /**
 30  * Считывание значения ползунка.
 31  */
 32 document.getElementById('lineWidth').oninput = function(){
 33 	R = this.value;
 34 }
 35 
 36 /** 
 37  * Выбор цвета (считывание с виджета).
 38  */ 
 39 document.getElementById('color').oninput = function(){
 40 	myColor = this.value;
 41 }
 42 
 43 /**
 44  * ФУНКЦИЯ ОЧИСТИТЬ ВСЕ.
 45  * Переопределяем на дефолтные значения.
 46  */
 47 function def(){
 48 	ctx.clearRect(0,0,900,600);
 49    flag = true;
 50    mode_flag = false;
 51    ctx.fillStyle = "#ffffff";
 52    ctx.fillRect(0,0,900,600);
 53 
 54    defImg.onload = function () { 
 55       ctx.drawImage(defImg,0,0,900,600);
 56    }
 57 }
 58 
 59 /**
 60  * ФУНКЦИЯ СОХРАНИТЬ РИСУНОК.
 61  */
 62 function saveImage(){
 63    const a = document.createElement("a");
 64    document.body.appendChild(a);
 65    a.href = canvas.toDataURL();
 66    a.download = "canvas-image/png";
 67    a.click();
 68    document.body.removeChild(a);
 69    console.log('you save the image');
 70 }
 71 
 72 /**
 73  * ФУНКЦИЯ СМЕНЫ РЕЖИМА НА ЗАЛИВКУ.
 74  */
 75 function changeMode_fill(){
 76    mode_flag = true;
 77    console.log('change mod to fill');
 78 }
 79 
 80 /**
 81  * ФУНКЦИЯ СМЕНЫ РЕЖИМА НА ОБВОДКУ.
 82  */
 83 function changeMode_stroke(){
 84    mode_flag = false;
 85    console.log('change mod to stroke');
 86 }
 87 
 88 
 89 /* *
 90  * ФУНКЦИЯ РИСОВАНИЯ ПО УМОЛЧАНИЮ. 
 91  * Радиус R использован как толщина линии, он считывается с ползунка.
 92  * Вывод координат в консоль (console.log) (позже можно убрать).
 93  * canvas.onmousemove = null даёт возможность остановить рисование когда отпсукаешь мышку.
 94  * */
 95 canvas.onmousedown = function(event){
 96    var x = event.offsetX;
 97    var y = event.offsetY;
 98    ctx.beginPath();
 99    ctx.arc(x, y, R, 0, 2 * Math.PI, true); 
100    ctx.fillStyle = myColor ;
101    ctx.fill();
102 
103    canvas.onmousemove = function(event){
104       var x1 = event.offsetX;
105       var y1 = event.offsetY;
106       console.log('cor x:',' ',x,'cor y:',' ',y); 
107       console.log('cor x1:',' ',x1,'cor y1:',' ',y1);
108       ctx.beginPath();
109       ctx.arc(x1, y1, R, 0, 2 * Math.PI, true); 
110       ctx.fillStyle = myColor ;
111       ctx.fill();
112       ctx.closePath();
113       
114       ctx.beginPath();
115       ctx.moveTo(x,y);
116       ctx.lineTo(x1,y1);
117       ctx.lineWidth = 2*R;
118       ctx.strokeStyle = myColor;
119       ctx.stroke();
120       x = x1;
121       y = y1;
122 if(y1>599){
123 		  canvas.onmousemove = null;
124 }
125 if(x1<1){
126 		  canvas.onmousemove = null;
127 }
128 if(y1<1){
129 		  canvas.onmousemove = null;
130 }
131 
132 if(x1>895){
133 		  canvas.onmousemove = null;
134 }
135   
136  }
137 }
138 
139 canvas.onmouseup = function(){
140    canvas.onmousemove = null; 
141 }
142 
143 /**
144  * ФУНКЦИЯ ЛИНИИ И ТОЧКИ.
145  * Аналогично функции рисования по умолчанию.
146  */
147 function draw(){
148 
149 	canvas.onmousedown = function(event){
150       var x = event.offsetX;
151       var y = event.offsetY;
152       ctx.beginPath();
153       ctx.arc(x, y, R, 0, 2 * Math.PI, true); 
154       ctx.fillStyle = myColor ;
155       ctx.fill();
156 
157 		canvas.onmousemove = function(event){
158          var x1 = event.offsetX;
159          var y1 = event.offsetY;
160          console.log('cor x:',' ',x,'cor y:',' ',y);
161          console.log('cor x1:',' ',x1,'cor y1:',' ',y1);  
162          ctx.beginPath();
163          ctx.arc(x1, y1, R, 0, 2 * Math.PI, true); 
164          ctx.fillStyle = myColor ;
165          ctx.fill();
166          ctx.closePath();
167 
168          ctx.beginPath();
169          ctx.moveTo(x,y);
170          ctx.lineTo(x1,y1);
171          ctx.lineWidth = 2*R;
172          ctx.strokeStyle = myColor;
173          ctx.stroke();
174          x = x1;
175          y = y1;
176 if(y1>599){
177 		  canvas.onmousemove = null;
178 }
179 if(x1<1){
180 		  canvas.onmousemove = null;
181 }
182 if(y1<1){
183 		  canvas.onmousemove = null;
184 }
185 
186 if(x1>895){
187 		  canvas.onmousemove = null;
188 }     
189 
190 
191 	 }  
192 
193       canvas.onmouseup = function(){
194          canvas.onmousemove = null; 
195       }
196    }
197 }
198 
199 /**
200  * ФУНКЦИЯ ЛАСТИК. 
201  * Аналогична функции линии и точки, но цвет const white.
202  */
203 function eraser(){
204 
205 	canvas.onmousedown = function(event){
206       var x = event.offsetX;
207 	   var y = event.offsetY;
208 		ctx.beginPath();
209       ctx.arc(x, y, R, 0, 2 * Math.PI, true);     
210 		ctx.fillStyle = "#ffffff" ;
211       ctx.fill();
212       	
213 		canvas.onmousemove = function(event){
214          var x1 = event.offsetX;
215          var y1 = event.offsetY;
216          console.log('cor x:',' ',x,'cor y:',' ',y);
217          console.log('cor x1:',' ',x1,'cor y1:',' ',y1);
218          ctx.beginPath();
219          ctx.arc(x1, y1, R, 0, 2 * Math.PI, true);       
220          ctx.fillStyle = "#ffffff" ;
221          ctx.fill();	
222          ctx.closePath();
223 
224          ctx.beginPath();
225          ctx.moveTo(x,y);
226          ctx.lineTo(x1,y1);
227          ctx.lineWidth = 2*R;
228          ctx.strokeStyle = "#ffffff";
229          ctx.stroke();
230          x = x1;
231          y = y1;
232       if(y1>599){
233 		  canvas.onmousemove = null;
234 }
235 if(x1<1){
236 		  canvas.onmousemove = null;
237 }
238 if(y1<1){
239 		  canvas.onmousemove = null;
240 }
241 
242 if(x1>895){
243 		  canvas.onmousemove = null;
244 }
245 	  
246 	  
247 	  }  
248 
249       canvas.onmouseup = function(){
250          canvas.onmousemove = null; 
251       }	
252    }
253 }
254 
255 /**
256  * ФУНКЦИЯ ДЛЯ ОТРИСОВКИ ОКРУЖНОСТИ.
257  * dataURL - получение ссылки на изображение холста.
258  * backgr - для сохранения изображения холста.
259  * ctx.drawImage(backgr,0,0,900,600); отрисовка холста на "предыдущем шаге". 
260  * dataURL = canvas.toDataURL(); (в onmousup) сохраняем холст и ссылку на его изображение для следующего рисования.
261  */
262 function drawCircle(){
263    
264 	canvas.onmousedown = function(event){
265       var dataURL = canvas.toDataURL(); 
266       var backgr = new Image(); 
267       backgr.src = dataURL;
268       console.log('save parametrs of canvas');
269       var x = event.offsetX;
270 	   var y = event.offsetY;	
271       
272 		canvas.onmousemove = function(event){
273          var x1 = event.offsetX;
274          var y1 = event.offsetY;
275          var r = Math.sqrt(Math.pow(x-x1,2)+Math.pow(y-y1,2));
276          console.log('cor x:',' ',x,'cor y:',' ',y);
277          console.log('cor x1:',' ',x1,'cor y1:',' ',y1);
278          
279          ctx.beginPath();
280          ctx.clearRect(0,0,900,600);
281          ctx.drawImage(backgr,0,0,900,600);
282          ctx.arc(x, y, r, 0, 2 * Math.PI, true);
283          if (mode_flag){
284             ctx.fillStyle = myColor;
285             ctx.fill();
286          } else {
287             ctx.strokeStyle = myColor;
288             ctx.lineWidth = 2*R;
289             ctx.stroke();
290          }
291      if(y1>599){
292 		  canvas.onmousemove = null;
293 }
294 if(x1<1){
295 		  canvas.onmousemove = null;
296 }
297 if(y1<1){
298 		  canvas.onmousemove = null;
299 }
300 
301 if(x1>895){
302 		  canvas.onmousemove = null;
303 }
304 
305  }
306       
307       canvas.onmouseup = function(){
308          dataURL = canvas.toDataURL(); 
309          backgr = new Image();
310          backgr.src = dataURL;
311          canvas.onmousemove = null; 
312       }	
313    }
314 }
315 
316 
317 /**
318  * ФУНКЦИЯ ДЛЯ РИСОВАНИЯ ПРЯМОУГОЛЬНИКА.
319  * Аналогична функции рисования окружности.
320  * Рисование окружности заменено на рисование прямоугольника.
321  */
322 function drawRect(){
323 
324 	canvas.onmousedown = function(event){
325       var dataURL = canvas.toDataURL(); 
326       var backgr = new Image(); 
327       backgr.src = dataURL;
328       console.log('save parametrs of canvas');
329 		var x = event.offsetX;
330       var y = event.offsetY;
331       
332       canvas.onmousemove = function(event){
333          var x1 = event.offsetX;
334          var y1 = event.offsetY;
335          var width = x1-x;
336          var height = y1-y;
337          ctx.beginPath();
338          ctx.clearRect(0,0,900,600);
339          ctx.drawImage(backgr,0,0,900,600);
340          if (mode_flag){
341             ctx.fillStyle = myColor;
342             ctx.fillRect(x, y, width, height);
343          } else {
344             ctx.strokeStyle = myColor;
345             ctx.lineWidth = 2*R;
346             ctx.strokeRect(x, y, width, height);
347          }
348     if(y1>599){
349 		  canvas.onmousemove = null;
350 }
351 if(x1<1){
352 		  canvas.onmousemove = null;
353 }
354 if(y1<1){
355 		  canvas.onmousemove = null;
356 }
357 
358 if(x1>895){
359 		  canvas.onmousemove = null;
360 }
361 	}
362       
363       canvas.onmouseup = function(){ 
364          dataURL = canvas.toDataURL(); 
365          backgr = new Image();
366          backgr.src = dataURL;
367          canvas.onmousemove = null; 
368       }	
369    }
370 }
371 
372 /**
373  * ФУНКЦИЯ ДЛЯ ОТРИСОВКИ ОВАЛА (ЭЛЛИПСА).
374  * 
375  */
376 function drawEllips(){
377 
378 	canvas.onmousedown = function(event){
379       var dataURL = canvas.toDataURL(); 
380       var backgr = new Image(); 
381       backgr.src = dataURL;
382       console.log('save parametrs of canvas');
383 		var x = event.offsetX;
384       var y = event.offsetY;
385       
386       canvas.onmousemove = function(event){
387          var x1 = event.offsetX;
388          var y1 = event.offsetY;
389          var width = Math.abs(x1-x);
390          var height = Math.abs(y1-y);
391          ctx.beginPath();
392          ctx.clearRect(0,0,900,600);
393          ctx.drawImage(backgr,0,0,900,600);
394          ctx.ellipse(x, y, width, height, 0, 0, 2 * Math.PI, true);
395          if (mode_flag){
396             ctx.fillStyle = myColor;
397             ctx.fill();
398          } else {
399             ctx.strokeStyle = myColor;
400             ctx.lineWidth = 2*R;
401             ctx.stroke();
402          }
403       if(y1>599){
404 		  canvas.onmousemove = null;
405 }
406 if(x1<1){
407 		  canvas.onmousemove = null;
408 }
409 if(y1<1){
410 		  canvas.onmousemove = null;
411 }
412 
413 if(x1>895){
414 		  canvas.onmousemove = null;
415 }
416 	  }
417       
418       canvas.onmouseup = function(){ 
419          dataURL = canvas.toDataURL(); 
420          backgr = new Image();
421          backgr.src = dataURL;
422          canvas.onmousemove = null; 
423       }	
424    }
425 }
426 
427 /**
428  * ФУНКЦИЯ ДЛЯ ОТРИСОВКИ КВАДРАТА.
429  * Аналогично функции для отрисовки прямоугольника+проверки
430  */
431 function drawSquare(){
432 		
433    canvas.onmousedown = function(event){
434       var dataURL = canvas.toDataURL(); 
435       var backgr = new Image(); 
436       backgr.src = dataURL;
437       console.log('save parametrs of canvas');
438       var x = event.offsetX;
439       var y = event.offsetY;	
440    
441       canvas.onmousemove = function(event){
442         
443 		var x1 = event.offsetX;
444          var y1 = event.offsetY;
445          var width = x1-x;
446          var height = y-y1;
447 if(y1>599){
448 		  canvas.onmousemove = null;
449 }
450 if(x1<1){
451 		  canvas.onmousemove = null;
452 }
453 if(y1<1){
454 		  canvas.onmousemove = null;
455 }
456 
457 if(x1>890){
458 		  canvas.onmousemove = null;
459 }
460 
461 
462 
463          if((y1-y<0) && (x1-x<0)){
464             ctx.beginPath();
465             ctx.clearRect(0,0,900,600);
466             ctx.drawImage(backgr,0,0,900,600);
467             if (mode_flag){
468                ctx.fillStyle = myColor;
469                ctx.fillRect(x, y, -Math.abs(width), -Math.abs(width));
470             } else {
471                ctx.strokeStyle = myColor;
472                ctx.lineWidth = 2*R;
473                ctx.strokeRect(x, y, -Math.abs(width), -Math.abs(width));
474             }
475          } 
476 		 
477 		   if((y1-y<0) && (x1-x>0)){
478             ctx.beginPath();
479             ctx.clearRect(0,0,900,600);
480             ctx.drawImage(backgr,0,0,900,600);
481             if (mode_flag){
482                ctx.fillStyle = myColor;
483                ctx.fillRect(x, y, Math.abs(width), -Math.abs(width));
484             } else {
485                ctx.strokeStyle = myColor;
486                ctx.lineWidth = 2*R;
487                ctx.strokeRect(x, y, Math.abs(width), -Math.abs(width));
488             }
489          } 
490 		 
491 		   if((y1-y>0) && (x1-x>0)){
492             ctx.beginPath();
493             ctx.clearRect(0,0,900,600);
494             ctx.drawImage(backgr,0,0,900,600);
495             if (mode_flag){
496                ctx.fillStyle = myColor;
497                ctx.fillRect(x, y, Math.abs(width), Math.abs(width));
498             } else {
499                ctx.strokeStyle = myColor;
500                ctx.lineWidth = 2*R;
501                ctx.strokeRect(x, y, Math.abs(width), Math.abs(width));
502             }
503          } 
504     
505          if((y1-y>0) && (x1-x<0)){
506             ctx.beginPath();
507             ctx.clearRect(0,0,900,600);
508             ctx.drawImage(backgr,0,0,900,600);
509             
510             if (mode_flag){
511                ctx.fillStyle = myColor;
512                ctx.fillRect(x, y, -Math.abs(width), Math.abs(width));
513             } else {
514                ctx.strokeStyle = myColor;
515                ctx.lineWidth = 2*R;
516                ctx.strokeRect(x, y, -Math.abs(width), Math.abs(width));
517             }
518          
519 		 
520 } 
521 }
522       
523 	   canvas.onmouseup = function(){
524          dataURL = canvas.toDataURL(); 
525          backgr = new Image();
526          backgr.src = dataURL;
527          canvas.onmousemove = null; 
528       }	
529    }
530 }
531 
532 /**
533  * ФУНКЦИЯ ДЛЯ РИСОВАНИЯ ЛОМАННОЙ.
534  * flag здесь нужен для рисования от последних координат. 
535  */
536 function linedraw(){
537 	flag = true;
538    var x;
539    var y;
540 
541    canvas.onmousedown = function(event){
542      var dataURL = canvas.toDataURL(); 
543       var backgr = new Image(); 
544       backgr.src = dataURL;
545 	 
546 	 if (flag){
547          x = event.offsetX;
548          y = event.offsetY;
549          console.log('x: ',x,'y: ',y);
550       } else {
551          var x1 = event.offsetX;
552          var y1 = event.offsetY;
553          
554 		 console.log('x1: ',x1,'y1: ',y1);
555          ctx.beginPath();
556          ctx.moveTo(x,y);
557          ctx.lineTo(x1,y1);
558          ctx.lineWidth = 2*R;
559          ctx.strokeStyle = myColor;
560          ctx.stroke();
561          ctx.closePath();
562          
563          ctx.beginPath();
564          ctx.arc(x, y, R, 0, 2 * Math.PI, true);
565          ctx.arc(x1, y1, R, 0, 2 * Math.PI, true);
566          ctx.fillStyle = myColor;
567          ctx.fill();	
568          x = x1;
569          y = y1;
570       }
571       canvas.onmousemove = function(event){
572        var x1 = event.offsetX;
573        var y1 = event.offsetY;
574 	  console.log('x: ',x1,'y: ',y1);
575 	  ctx.beginPath();
576         ctx.clearRect(0,0,900,600);
577          ctx.drawImage(backgr,0,0,900,600);
578 		ctx.moveTo(x,y);
579          ctx.lineTo(x1,y1);
580          ctx.lineWidth = 2*R;
581          ctx.strokeStyle = myColor;
582          ctx.stroke();
583          ctx.closePath();
584 		 ctx.beginPath();
585          ctx.arc(x, y, R, 0, 2 * Math.PI, true);
586          ctx.arc(x1, y1, R, 0, 2 * Math.PI, true);
587          ctx.fillStyle = myColor;
588          ctx.fill();	
589          
590 if(y1>599){
591 		  canvas.onmousemove = null;
592 }
593 if(x1<1){
594 		  canvas.onmousemove = null;
595 }
596 if(y1<1){
597 		  canvas.onmousemove = null;
598 }
599 
600 if(x1>890){
601 		  canvas.onmousemove = null;
602 }
603 	  }
604 	  
605 	  canvas.onmouseup = function(){
606        
607     	  dataURL = canvas.toDataURL(); 
608          backgr = new Image();
609          backgr.src = dataURL;
610          canvas.onmousemove = null; 
611 		 }	
612    }
613 }
614 
615 /**
616  * ФУНКЦИЯ ПИПЕТКА.
617  * При нажатии считывает с координат мышки цвет пикеля в формате rgb.
618  * Устанавливает считанный цвет пикселя в качестве текущего.
619  */
620 function pipette(){
621    canvas.onmousedown = function(event){
622       var x = event.offsetX;
623       var y = event.offsetY;
624       var pix_data = ctx.getImageData(x,y,1,1).data;
625       var rgb_base = 'rgb(' + pix_data[0] + ','+ pix_data[1] + ','+ pix_data[2] +')';
626       var r_rgb = pix_data[0];
627       var g_rgb = pix_data[1];
628       var b_rgb = pix_data[2];
629       myColor = 'rgb('+r_rgb+','+g_rgb+','+b_rgb+')';
630       console.log(rgb_base);
631    }
632 }
633 
634 /**
635  * ФУНКЦИЯ ЗАЛИВКА.
636  */
637 function filling(){
638    canvas.onmousedown = function(event){
639       var x = event.offsetX;
640       var y = event.offsetY;
641       var pix_data = ctx.getImageData(x,y,1,1).data;
642 
643       function rgb_hex(r, g, b){
644          return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
645       }
646 
647       var boardColor = rgb_hex(pix_data[0], pix_data[1], pix_data[2]); 
648       var stack = [[x,y]];
649       var pixel;
650       ctx.fillStyle = myColor;
651 
652       while (stack.length > 0){
653          pixel = stack.pop();
654          if (pixel[0] < 0 || pixel[0] >= 900){
655              continue;}
656          if (pixel[1] < 0 || pixel[1] >= 600){
657              continue;}
658 
659          pix_data = ctx.getImageData(pixel[0], pixel[1], 1,1).data;
660          pixColor = rgb_hex(pix_data[0], pix_data[1], pix_data[2]);
661 
662          if (pixColor == boardColor && pixColor !== myColor){
663             ctx.fillRect(pixel[0]-1,pixel[1]-1,3,3);
664 
665             stack.push([      
666                pixel[0] -2,
667                pixel[1]
668             ]);
669             stack.push([      
670                pixel[0] +2,
671                pixel[1]
672             ]);
673             stack.push([      
674                pixel[0],
675                pixel[1] -2
676             ]);
677             stack.push([      
678                pixel[0],
679                pixel[1] +2
680             ]);
681          } 
682       }
683    }
684 
685 }