Редактирование: Paint coursework

{{#widget:Iframe |url=https://arelakes.github.io/Paint/paint.html |width=1100 |height=700 |border=0 }}

==Код программы==
<div class="mw-collapsible mw-collapsed">
'''Код программы на языке JavaScript:''' <div class="mw-collapsible-content">
<syntaxhighlight lang="javascript" line start="1" enclose="div">

Описание кода JavaScript:

window.addEventListener('load', main, false);
var color = "#000000";
function main() {
var ctx = canvas_example.getContext('2d')
var w = canvas_example.width
var h = canvas_example.height
var r = 10
var x = 0
var y = 0
var colorPicker = document.getElementById('colorpick')
var getcolor = document.getElementById('getcolor')
var cos = Math.cos(Math.PI/6)
var sin = Math.sin(Math.PI/6)
var bool = false;
var draw = false;
ctx.fillStyle = '#ffffff';
ctx.fillRect(0,0,w,h);
colorPicker.addEventListener("input", function() {
    document.getElementById('c8').style.backgroundColor = colorPicker.value //пример считывания, передавать через value
  });
	При нажатии на кнопку все фигуры на холсте будут отображены с заливкой.
	b7.onclick = function() {
		bool = !bool;
	}		


При запуске функции нажатием на кнопку пользователь может нарисовать мышкой кривую, которая будет отображаться на холсте по мере продвижения мышки.
    b4.onclick = function() {
		ctx.lineWidth = document.getElementById('size').value;
		ctx.strokeStyle = colorPicker.value;
			canvas_example.onmousedown = function(event){
				var x = event.offsetX;
				var y = event.offsetY;
                draw = true;
                ctx.beginPath();
                ctx.moveTo(x, y);
            }
			canvas_example.onmousemove = function(event){
				if(draw==true){
					var x = event.offsetX;
                    var y = event.offsetY;
                    ctx.lineTo(x, y);
                    ctx.stroke();
                }
            }
            canvas_example.onmouseup = function(event){
				var x = event.offsetX;
                var y = event.offsetY;
                ctx.lineTo(x, y);
                ctx.stroke();
                ctx.closePath();
                draw = false;
            }		
	}			
При запуске функции нажатием на кнопку пользователь стирает рисунок по месту проведения мышки.
	b8.onclick = function() {
		ctx.lineWidth = document.getElementById('size').value;
		ctx.strokeStyle = 'white';
			canvas_example.onmousedown = function(event){
				var x = event.offsetX;
				var y = event.offsetY;
                draw = true;
                ctx.beginPath();
                ctx.moveTo(x, y);
            }
			canvas_example.onmousemove = function(event){
				if(draw==true){
					var x = event.offsetX;
                    var y = event.offsetY;
                    ctx.lineTo(x, y);
                    ctx.stroke();
                }
            }
            canvas_example.onmouseup = function(event){
				var x = event.offsetX;
                var y = event.offsetY;
                ctx.lineTo(x, y);
                ctx.stroke();
                ctx.closePath();
                draw = false;
            }		
	}	
	
	b3.onclick = function() {
		canvas_example.onmousedown = function(event){
			var x = event.offsetX;
			var y = event.offsetY;
			var imageData = ctx.getImageData(0, 0, w, h);
			canvas_example.onmousemove = function(event){
					ctx.lineCap = "round";
					ctx.putImageData(imageData, 0, 0);
					var x1 = event.offsetX;
					var y1 = event.offsetY;
					ctx.beginPath();
					ctx.lineWidth = document.getElementById('size').value;
					ctx.strokeStyle = colorPicker.value;
					ctx.fillStyle = colorPicker.value;
					var r = Math.sqrt((x-x1)*(x-x1)+(y-y1)*(y-y1))
					ctx.arc(x, y, r, 0, 2*Math.PI);
					if (bool) {
						ctx.fill();
				} else {
					ctx.stroke();
				}
				canvas_example.onmouseup = function(event) {
					canvas_example.onmousemove = function() {}
				}
				}
			}
		}
		b2.onclick = function() {
		canvas_example.onmousedown = function(event){
			var x = event.offsetX;
			var y = event.offsetY;
			var imageData = ctx.getImageData(0, 0, w, h);
			canvas_example.onmousemove = function(event){
					ctx.lineCap = "round";
					ctx.putImageData(imageData, 0, 0);
					var x1 = event.offsetX;
					var y1 = event.offsetY;
					ctx.beginPath();
					ctx.lineWidth = document.getElementById('size').value;
ctx.strokeStyle = colorPicker.value;
					ctx.fillStyle = colorPicker.value;
					var r = Math.sqrt((x-x1)*(x-x1)+(y-y1)*(y-y1))
					ctx.moveTo(x, y);
					ctx.lineTo(x, y1); // линия вправо
					ctx.lineTo(x1, y1); // линия вниз
					ctx.lineTo(x1, y); // линия влево
					ctx.closePath(); // смыкание начала и конца рисунка
					if (bool) {
						ctx.fill();
				} else {
					ctx.stroke();
				}
				canvas_example.onmouseup = function(event) {
					canvas_example.onmousemove = function() {}
				}	
			}
		}
	}	
	
	b5.onclick = function() {
		canvas_example.onmousedown = function(event){
			var x0 = event.offsetX;
			var y0 = event.offsetY;
			var imageData = ctx.getImageData(0, 0, w, h);
			canvas_example.onmousemove = function(event){
				ctx.putImageData(imageData, 0, 0);
				ctx.lineCap = "round";
				var x1 = event.offsetX;
				var y1 = event.offsetY;
				ctx.beginPath();
				ctx.lineWidth = 
document.getElementById('size').value;
				ctx.strokeStyle = colorPicker.value;
				ctx.fillStyle = colorPicker.value;
				ctx.moveTo(x0, y0);
				ctx.lineTo(x1, y0);
				ctx.lineTo((x0+x1)/2, y1);
				ctx.lineTo(x0, y0);
				if (bool) {
					ctx.fill();
				} else {
					ctx.stroke();
				}
				canvas_example.onmouseup = function(event) {
					canvas_example.onmousemove = function() {}
				}
			}
		}
	}
		b1.onclick = function() {
		canvas_example.onmousedown = function(event){
			var x = event.offsetX;
			var y = event.offsetY;
			var imageData = ctx.getImageData(0, 0, w, h);
			canvas_example.onmousemove = function(event){
					ctx.putImageData(imageData, 0, 0);
					ctx.lineCap = "round";
					var x1 = event.offsetX;
					var y1 = event.offsetY;
					ctx.beginPath();
					ctx.lineWidth = 

document.getElementById('size').value;
					ctx.strokeStyle = colorPicker.value;
					ctx.moveTo(x, y);
					ctx.lineTo(x1, y1);
					ctx.stroke();
					canvas_example.onmouseup = function(event) {
					canvas_example.onmousemove = function() {}
				}
			}
		}	
	}
		b6.onclick = function() {
		canvas_example.onmousedown = function(event){
			var x = event.offsetX;
			var y = event.offsetY;
			var imageData = ctx.getImageData(0, 0, w, h);
			canvas_example.onmousemove = function(event){
					ctx.putImageData(imageData, 0, 0);
					ctx.lineCap = "round";
					var x1 = event.offsetX;
					var y1 = event.offsetY;
					ctx.beginPath();
					ctx.lineWidth = 
document.getElementById('size').value;
					ctx.strokeStyle = colorPicker.value;
					ctx.fillStyle = colorPicker.value;
					var r = Math.sqrt((x-x1)*(x-x1)+(y-y1)*(y-y1))
					ctx.ellipse(x, y, r, r/2,0, 0, 2*Math.PI);
					if (bool) {
						ctx.fill();
				} else {
					ctx.stroke();
				}
				canvas_example.onmouseup = function(event) {
					canvas_example.onmousemove = function() {}
				}
				}
			}
		}
	
	b9.onclick = function() {
		ctx.clearRect(0, 0, w, h);
	}
}
Функции b1, b2, b3, b5, b6 работают аналогично выше описанным и отображают на холсте различные фигуры, размеры и цвет которых пользователь может задать самостоятельно, исключение составляет b9,  которая удаляет материал со всего холста.
</syntaxhighlight>
</div>

Работу выполнили студентки гр. 3630103/00003 Алексеева Мария, Арбузова Елизавета, Москвина Ксения.