<title>Joonistamine JS abil</title>
<link rel="stylesheet" href="canvaStyle.css">
<script src="canvasScript.js"></script>
<script src="lippScript.js"></script>
<script src="homeScript.js"></script>
</head>
<body>
<h1>Joonistamine JS abil</h1>
<canvas id="pyhi" width="400" height="300"></canvas>
<br>
<input type="button" value="kustuta" onclick="kustuta()">
<br>
<input type="button" value="ring" onclick="ring()">
<label for="radius"> Radius</label>
<input type="number" id="radius" min="1" max="200" step="10" onclick="radius()">
<br>
<input type="button" value="ristkulik" onclick="ristkylik()">
<label for="korgus"> Korgus</label>
<input type="number" id="korgus" min="1" max="200" step="10" onclick="ristkylik()">
<label for="laius"> Laius</label>
<input type="number" id="laius" min="1" max="200" step="10" onclick="ristkylik()">
<br>
<input type="button" value="joon" onclick="joon()">
<h1>Lipud</h1>
<canvas id="lipp" width="330" height="210"></canvas>
<br>
<input type="button" value="eesti" onclick="eestilipp()">
<br>
<input type="button" value="france" onclick="francelipp()">
<br>
<input type="button" value="switz" onclick="switzlipp()">
<br>
<input type="button" value="canada" onclick="canadalipp()">
<br>
<input type="button" value="japan" onclick="japanlipp()">
<br>
<input type="button" value="kustuta lipp" onclick="kustutalipp()">
<h1>MAJA</h1>
<canvas id="house" width="400" height="300"></canvas>
<input type="button" value="Kustuta" onclick="kustuta()">
<br>
<input type="button" value="Joonista kõik" onclick="joonistakoik()">
<br>
<input type="button" value="Background" onclick="back()">
<br>
<input type="button" value="Sein" onclick="seinmaja()">
<br>
<input type="button" value="Aken" onclick="akenmaja()">
<br>
<input type="button" value="Korsten" onclick="korstenmaja()">
<br>
<input type="button" value="Katus" onclick="katusmaja()">
<br>
<input type="button" value="Uks" onclick="uksmaja()">
<br>
<input type="button" value="Päike" onclick="sun()">
<br>
<input type="button" value="Cloud" onclick="cloud()">
<br>
<input type="button" value="Tree" onclick="tree()">
</body>
</html>
function getCanvas() {
return document.getElementById("house").getContext("2d");
}
function back() {
let m = getCanvas();
m.fillStyle = "#BFEFFF";
m.fillRect(0, 0, 400, 300);
m.fillStyle = "#82B090";
m.fillRect(0, 250, 400, 50);
}
function kustuta() {
let m = getCanvas();
m.clearRect(0, 0, 400, 300);
}
function sun() {
let m = getCanvas();
m.beginPath();
m.arc(350, 50, 30, 0, 2 * Math.PI, true);
m.fillStyle = "#FFD700";
m.fill();
}
function tree() {
let m = getCanvas();
// Ствол дерева
m.fillStyle = "#C19A6B";
m.fillRect(50, 180, 20, 70);
m.fillStyle = "#A8E6CF";
m.beginPath();
m.arc(55, 140, 30, 0, 2 * Math.PI);
m.arc(40, 170, 30, 0, 2 * Math.PI);
m.arc(70, 170, 30, -1, 2 * Math.PI);
m.fill();
}
function cloud() {
let m = getCanvas();
m.fillStyle = "#ffffff";
m.beginPath();
m.arc(70, 50, 25, 0, 2 * Math.PI);
m.arc(90, 40, 25, 0, 2 * Math.PI);
m.arc(110, 50, 25, 0, 2 * Math.PI);
m.fill();
}
function seinmaja() {
let m = getCanvas();
m.fillStyle = "#F4C2C2";
m.fillRect(100, 150, 200, 100);
m.strokeStyle = "black";
m.strokeRect(100, 150, 200, 100);
}
function akenmaja() {
let m = getCanvas();
m.fillStyle = "#E0FFFF";
m.fillRect(130, 170, 40, 40);
m.strokeStyle = "black";
m.strokeRect(130, 170, 40, 40);
}
function korstenmaja() {
let m = getCanvas();
m.fillStyle = "#A0522D";
m.fillRect(240, 100, 20, 40);
m.strokeStyle = "black";
m.strokeRect(240, 100, 20, 40);
}
function katusmaja() {
let m = getCanvas();
m.beginPath();
m.moveTo(100, 150);
m.lineTo(200, 80);
m.lineTo(300, 150);
m.closePath();
m.fillStyle = "#D8BFD8";
m.fill();
m.strokeStyle = "black";
m.stroke();
}
function uksmaja() {
let m = getCanvas();
m.fillStyle = "#DEB887";
m.fillRect(190, 200, 40, 50);
m.strokeStyle = "black";
m.strokeRect(190, 200, 40, 50);
m.beginPath();
m.arc(225, 225, 3, 0, 2 * Math.PI, true);
m.fillStyle = "black";
m.fill();
}
function joonistakoik(){
back();
seinmaja();
akenmaja();
korstenmaja();
katusmaja();
uksmaja();
sun();
tree();
cloud();
}