Menu
Opis
Płótno
canvas
- kwiatek
Własności i metody obiektu
malarz
:
malarz.lineWidth= szerokość; (grubość, w px)
malarz.strokeStyle= "kolor linii";
malarz.moveTo(x,y); - przejdź do punktu (x,y)
malarz.lineTo(x,y); - twórz prostą ścieżkę do punktu (x,y)
malarz.bezierCurveTo(xpk1, ypk1, xpk2, ypk2, x, y) - twórz sześcienną krzywą Béziera
malarz.beginPath(); - zakończ poprzednią, rozpocznij nową ścieżkę
malarz.closePath(); - wróć, domknij ścieżkę
malarz.stroke(); -
NARYSUJ
ścieżkę
140 nazw kolorów
ĆWICZENIE
Narysuj kształt koloru karcianego pik:
♤
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.translate(100,100); malarz.moveTo(0,0); malarz.bezierCurveTo (40, 80, 50, 100, 0, 250 ); malarz.strokeStyle="green"; malarz.lineWidth= 2; malarz.stroke(); malarz.beginPath(); malarz.strokeStyle="green"; malarz.fillStyle= "orange"; malarz.moveTo(0,0); malarz.bezierCurveTo (80, -50, 120, 50, 0, 0 ); malarz.bezierCurveTo (-50, -100, 50, -100, 0, 0 ); malarz.bezierCurveTo (-50, 100, 50, 100, 0, 0 ); malarz.bezierCurveTo ( -130, 50, -80, -50, 0, 0 ); malarz.fill(); malarz.stroke(); malarz.beginPath(); malarz.rotate(0.7); malarz.moveTo(0,0); malarz.bezierCurveTo (70, -50, 120, 50, 0, 0 ); malarz.bezierCurveTo (-40, -90, 50, -100, 0, 0 ); malarz.bezierCurveTo (-45, 80, 50, 100, 0, 0 ); malarz.bezierCurveTo ( -110, 60, -80, -50, 0, 0 ); malarz.strokeStyle="green"; malarz.fillStyle= "red"; malarz.fill(); malarz.stroke(); malarz.beginPath(); malarz.arc(0, 0, 15, 0, Math.PI*2); malarz.strokeStyle="green"; malarz.fillStyle= "yellow"; malarz.fill(); malarz.stroke(); malarz.rotate(-0.7); malarz.translate(-100,-100); </script> </body>
Podgląd:
📂