Joonistamine JS-ga
<const valgusfoorCanvas = document.getElementById('valgusfoor');
<const vfCtx=" valgusfoorCanvas.getContext('2d'" ;
Lipud
canvas#tahvel{
background-color: aquamarine;
border: 1px solid black;
}
canvas#lipp{
border: 1px solid gray;
}
//sirge joon
function sirgeJoon(){
//määrame tahvli
const tahvel=document.getElementById(“tahvel”);
if(tahvel.getContext){
let t=tahvel.getContext(‘2d’); //anname tahvli nimi on t
//joon
t.beginPath();
t.strokeStyle=”red”;
t.lineWidth=1;
t.moveTo(20,80); //alguspunkt
t.lineTo(150,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 tahvli nimi 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 -vaska üleval tahvli nurk, 300-ahvli 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 tahvli nimi on t
//ümberjoon
t.beginPath();
t.strokeStyle=”green”;
t.lineWidth=1;
t.arc(50,50, r.value, 0, 2*Math.PI, true); //x, y- keskpuntk, R
t.stroke();
//rong
t.beginPath();
t.fillStyle=”green”;
t.lineWidth=1;
t.arc(50,120, r.value, 0, 2*Math.PI, true); //x, y- keskpuntk, 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 -vaska üleval tahvli nurk, 300-ahvli 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″;
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,300,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);
}
}