Как нарисовать - Лего человечки

Для нарисования своего лего человечка нужно использовать HTML и JavaScript.

Для начала нужно создать полотно, на котором можно будет рисовать. Называется canvas. Для создания используем код HTML:

<canvas id="plate" width="400" height="400" style="background-color:white"></canvas>

id=’plate’ — Уникальный айди/индекс нашего полотна
width=’400′ — Ширина полотна. Указывается в пикселях
height=’400′ — Высота полотна. Указывается в пикселях
style=’background-color:white’ — Добавляем стиль нашему полотну, а именно задний фон

Затем нужно использовать JavaScript для рисования на полотне. В начале/конце нашей страницы добавляем данный код:

<script type="text/javascript">
function joon() {
	var p = document.getElementById("plate").getContext("2d");
	
	// Рисуем линию
	p.beginPath();
	p.lineWidth = "5";
	p.strokeStyle = "red";
	
	p.moveTo(20, 20);
	p.lineTo(100, 100);
	p.lineTo(150, 60);
	
	p.stroke();
}

function ruut() {
	var p = document.getElementById("plate").getContext("2d");
	
	// Прямоугольник
	p.fillStyle = "lightgreen";
	p.fillRect(10, 10, 30, 30); // x, y, width, height
}

function ring() {
	var p = document.getElementById("plate").getContext("2d");
	
	// Круг
	p.beginPath();
	p.arc(150, 150, 30, 0, 2 * Math.PI, true); // x, y, radius, ...
	p.fillStyle = "violet";
	p.fill();
}

function kustuta() {
	var p = document.getElementById("plate").getContext("2d");

	p.clearRect(0, 0, 1000, 1000);
}
</script>

Впринципе данного кода хватит чтобы нарисовать линию, круг или прямоугольник. Теперь нужно добавить сами кнопки чтобы после нажатия на них появлялся результат на нашем полотне.

<br><input type="button" value="Линии" onClick="joon();"></input>
<br><input type="button" value="Квадрат" onClick="ruut();"></input>
<br><input type="button" value="Круг" onClick="ring();"></input>
<br><input type="button" value="Стереть" onClick="kustuta();"></input>

На этом всё. Рисуйте достойных лего человечков и тогда я их добавлю на данный сайт.

Корзина