Lego joonistamiseks peate kasutama HTML ja JavaScript.

Kõigepealt tuleb luua lõuend, millele saab joonistada. Kutsutud lõuend. Kasuta HTML-koodi:

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

• id= ‘plaat’ – meie veebi unikaalne ID / indeks
• width= ‘400’ – kanga laius. Määratud pikslites
• height = ‘400’ – lõuendi kõrgus. Määratud pikslites
• style = ‘background-color: white’ – lisage meie lõuendile stiil, nimelt taust

<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>

Põhimõtteliselt on see kood piisav, et joonistada joon, ring või ristkülik. Nüüd peate nupud ise lisama, et pärast nende klõpsamist ilmuks tulemus meie lõuendile.

<br><input type="button" value="Joon" onClick="joon();"></input>
<br><input type="button" value="Ruut" onClick="ruut();"></input>
<br><input type="button" value="Ring" onClick="ring();"></input>
<br><input type="button" value="Kustuta" onClick="kustuta();"></input>

See on kõik. Joonista lego-väärt väikesed inimesed ja seejärel lisan need sellele saidile.