Menu
Opis
Płótno
canvas
- domek
Użyte własności i metody obiektu
malarz
:
malarz.lineWidth= "szerokość linii w px";
malarz.strokeStyle= "kolor linii";
malarz.fillStyle= "kolor wypełnienia";
malarz.moveTo(x,y); - przejdź do punktu (x,y)
malarz.lineTo(x,y); - twórz ścieżkę do punktu (x,y)
malarz.beginPath(); - zakończ poprzednią, rozpocznij nową ścieżkę
malarz.closePath(); - domknij ścieżkę
malarz.stroke(); - narysuj ścieżkę
malarz.fill(); - wypełnij ścieżkę
malarz.strokeRect(x,y,szerokość,wysokość); - narysuj kontur prostokąta zaczynając od lewego górnego rogu w punkcie (x,y)
malarz.fillRect(x,y,szer,wys.); - narysuj wypełniony prostokąt
malarz.clearRect(x,y,szer,wys); - wyczyść prostokąt
Kod
👀
<style> html, body {margin: 0; height: 100%;} body {overflow: hidden; height: inherit;} </style><body><canvas></canvas> <script> //----- USTAWIENIE canvas ------ canvas = document.querySelector('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const malarz = canvas.getContext('2d'); canvas.addEventListener('mousemove', event => {let bound = canvas.getBoundingClientRect(); x = event.clientX - bound.left - canvas.clientLeft; y = event.clientY - bound.top - canvas.clientTop; malarz.font="18px Arial"; malarz.clearRect(0,0,100,22); malarz.fillText(x+', '+y,0,18); }); //====koniec ustawień===== malarz.lineWidth=2; malarz.strokeStyle="red"; malarz.fillStyle="blue"; malarz.fillRect(100,200,300,200); malarz.beginPath(); malarz.moveTo(100,200); malarz.lineTo(150,150); malarz.lineTo(350,150); malarz.lineTo(400,200); malarz.closePath(); malarz.fillStyle="brown"; malarz.fill(); malarz.clearRect(150,250,50,80); malarz.fillStyle="black"; malarz.fillRect(300,130,40,50); </script> </body>
Podgląd:
📂