Joonistamine JS-ga
Lipud
canvas#tahvel{
background-color: lightpink;
border: 1px solid black;
}
canvas#lipp{
border: 1px solid gray;
}
h1{
font-size:22pt;
}
//sirge joon
function sirgeJoon(){
//määrame tahvli
const tahvel=document.getElementById(“tahvel”);
if(tahvel.getContext){
let t=tahvel.getContext(“2d”); // anname tahvlinimi on t
//joon
t.beginPath();
t.strokeStyle=”red”;
t.lineWidth = 1;
t.moveTo(20,80); //alguspunkt
t.lineTo(50,30); //lõpppunkt
t.stroke();
}
}
//kolmnurk
function kolmnurk(){
//määrame tahvli
const tahvel=document.getElementById(“tahvel”);
if(tahvel.getContext){
let t=tahvel.getContext(“2d”); // anname tahvlinimi on t
//joon
t.beginPath();
t.strokeStyle=”red”;
t.fillStyle=”red”; //taust
t.lineWidth = 1;
t.moveTo(50,100); //alguspunkt
t.lineTo(150,100);
t.lineTo(150,200);
t.lineTo(50,100); //lõpppunkt
t.stroke();
t.fill();
}
}
function puhasta(){
const tahvel=document.getElementById(“tahvel”);
if(tahvel.getContext) {
let t = tahvel.getContext(“2d”);
t.clearRect(0,0,300,250); // 0,0 -vasak üleval tahvli nurk, 300-tahvli laius, 250- tahvli kõrgus
}
}
//ring
function ring(){
//määrame tahvli
const tahvel=document.getElementById(“tahvel”);
let r=document.getElementById(“raadius”);
if(tahvel.getContext){
let t=tahvel.getContext(“2d”); // anname tahvlinimi on t
//ümberjoon
t.beginPath();
t.strokeStyle=”green”;
t.lineWidth = 1;
t.arc(50,50, r.value, 0, 2*Math.PI, true); //x, y-keskpunkt, R
t.stroke();
//ring
t.beginPath();
t.fillStyle=”green”;
t.lineWidth = 1;
t.arc(50,120, r.value, 0, 2*Math.PI, true); //x, y-keskpunkt, R
t.fill();
}
}
function ristkylik(){
const tahvel=document.getElementById(“tahvel”);
let laius=document.getElementById(“laius”);
let korgus=document.getElementById(“korgus”);
if(tahvel.getContext) {
let t = tahvel.getContext(“2d”);
t.fillStyle=”yellow”;
t.fillRect(50,30,laius.value,korgus.value); // 0,0 -vasak üleval tahvli nurk, 300-tahvli laius, 250- tahvli kõrgus
}
}
function pilt(){
const tahvel=document.getElementById(“tahvel”);
if(tahvel.getContext) {
let t = tahvel.getContext(“2d”);
const fail=new Image();
fail.src=”https://picsum.photos/100/200?random=1″;
fail.onload = () => {
t.drawImage(fail, 50, 50, 100, 200);
}
}
}
function eestiLipp(){
const lipp=document.getElementById(“lipp”);
if(lipp.getContext) {
let l = lipp.getContext(“2d”);
l.fillStyle=”blue”;
l.fillRect(0,0,330,70);
l.fillStyle=”black”;
l.fillRect(0,70,330,70);
l.fillStyle=”white”;
l.fillRect(0,140,330,70);
}
}
function prantsusmaa(){
const lipp=document.getElementById(“lipp”);
if(lipp.getContext) {
let l = lipp.getContext(“2d”);
l.fillStyle=”blue”;
l.fillRect(0,0,110,210);
l.fillStyle=”white”;
l.fillRect(110,0,220,210);
l.fillStyle=”red”;
l.fillRect(220,0,330,210);
const fail=new Image();
fail.src=”https://merkulova.thkit.ee/wp/wp-content/uploads/2025/10/plankton.jpg”;
fail.onload = () => {
l.drawImage(fail, 50, 50, 100, 200);
}
}
}