Rysowanie w elemencie <canvas>

Plik: 001.html 

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>Canvas</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
    <link rel='stylesheet' href='canvas.css'>
  </head>
  <body>
    <h1>Rysowanie w obiekcie canvas</h1>
    <canvas></canvas>
    <script></script>
  </body>
</html>
Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 002.html 

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>Canvas</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
    <link rel='stylesheet' href='canvas.css'>
  </head>
  <body>
    <h1>Rysowanie w obiekcie canvas</h1>
    <canvas width='300' height='200'></canvas>
    <script></script><br>
  </body>
</html>
Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 003.html 

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>Canvas</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
    <link rel='stylesheet' href='canvas.css'>
  </head>
  <body>
    <h1>Rysowanie w obiekcie canvas</h1>
    <canvas width='300' height='200'></canvas>
    <script>
      const canvas = document.querySelector('canvas');
    </script><br>
  </body>
</html>
Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 004.html 

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>Canvas</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
    <link rel='stylesheet' href='canvas.css'>
  </head>
  <body>
    <h1>Rysowanie w obiekcie canvas</h1>
    <canvas width='300' height='200'></canvas>
    <script>
      const canvas = document.querySelector('canvas');
      const ctx = canvas.getContext("2d");
    </script><br>
  </body>
</html>
Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 005.html 

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>Canvas</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
    <link rel='stylesheet' href='canvas.css'>
  </head>
  <body>
    <h1>Rysowanie w obiekcie canvas</h1>
    <canvas width='300' height='200'></canvas>
    <script>
      const canvas = document.querySelector('canvas');
      const ctx = canvas.getContext("2d");
      ctx.beginPath();
    </script><br>
  </body>
</html>
Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 006.html 

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>Canvas</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
    <link rel='stylesheet' href='canvas.css'>
  </head>
  <body>
    <h1>Rysowanie w obiekcie canvas</h1>
    <canvas width='300' height='200'></canvas>
    <script>
      const canvas = document.querySelector('canvas');
      const ctx = canvas.getContext("2d");
      ctx.beginPath();
      ctx.arc(150, 100, 90, 0, 2 * Math.PI);
    </script><br>
  </body>
</html>
Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 007.html 

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>Canvas</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
    <link rel='stylesheet' href='canvas.css'>
  </head>
  <body>
    <h1>Rysowanie w obiekcie canvas</h1>
    <canvas width='300' height='200'></canvas>
    <script>
      const canvas = document.querySelector('canvas');
      const ctx = canvas.getContext("2d");
      ctx.beginPath();
      ctx.arc(150, 100, 90, 0, 2 * Math.PI);
      ctx.stroke();
    </script><br>
  </body>
</html>
Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 007a.html 

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>Canvas</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
    <link rel='stylesheet' href='canvas.css'>
  </head>
  <body>
    <h1>Rysowanie w obiekcie canvas</h1>
    <canvas width='300' height='200'></canvas>
    <script>
      const canvas = document.querySelector('canvas');
      const ctx = canvas.getContext("2d");
      ctx.beginPath();
      ctx.arc(150, 100, 90, 0, 2 * Math.PI);
      ctx.fill();
    </script><br>
  </body>
</html>
Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 007b.html 

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>Canvas</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
    <link rel='stylesheet' href='canvas.css'>
  </head>
  <body>
    <h1>Rysowanie w obiekcie canvas</h1>
    <canvas width='300' height='200'></canvas>
    <script>
      const canvas = document.querySelector('canvas');
      const ctx = canvas.getContext("2d");
      ctx.beginPath();
      ctx.arc(150, 100, 90, 0, 2 * Math.PI);
      ctx.fillStyle = 'red';
      ctx.fill();
    </script><br>
  </body>
</html>
Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 008.html 

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>Canvas</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
    <link rel='stylesheet' href='canvas.css'>
  </head>
  <body>
    <h1>Rysowanie w obiekcie canvas</h1>
    <canvas width='300' height='200'></canvas>
    <script>
      const canvas = document.querySelector('canvas');
      const ctx = canvas.getContext("2d");
      ctx.beginPath();
      ctx.arc(150, 100, 90, 0, 2 * Math.PI);
      ctx.fillStyle = 'red';
      ctx.fill();
      ctx.fillStyle = 'white';
      ctx.fillRect(90, 85, 120, 30);
    </script><br>
  </body>
</html>
Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 009.html 

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>Canvas</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
    <link rel='stylesheet' href='canvas.css'>
  </head>
  <body>
    <h1>Rysowanie w obiekcie canvas - okręgi</h1>
    <canvas width='300' height='200'></canvas>
    <script>
      const canvas = document.querySelector('canvas');
      const ctx = canvas.getContext("2d");
      ctx.beginPath();
      ctx.arc(150, 100, 90, 0, 2 * Math.PI);
      ctx.arc(150, 100, 60, 0, 2 * Math.PI);
      ctx.arc(150, 100, 30, 0, 2 * Math.PI);
      ctx.stroke();
    </script><br>
  </body>
</html>
Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 009a.html 

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>Canvas</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
    <link rel='stylesheet' href='canvas.css'>
  </head>
  <body>
    <h1>Rysowanie w obiekcie canvas - okręgi</h1>
    <canvas width='300' height='200'></canvas>
    <script>
      const canvas = document.querySelector('canvas');
      const ctx = canvas.getContext("2d");
      ctx.beginPath(); ctx.arc(150, 100, 90, 0, 2 * Math.PI); ctx.stroke();
      ctx.beginPath(); ctx.arc(150, 100, 60, 0, 2 * Math.PI); ctx.stroke();
      ctx.beginPath(); ctx.arc(150, 100, 30, 0, 2 * Math.PI); ctx.stroke();
    </script><br>
  </body>
</html>
Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 009b.html 

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>Canvas</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
    <link rel='stylesheet' href='canvas.css'>
  </head>
  <body>
    <h1>Rysowanie w obiekcie canvas - okręgi</h1>
    <canvas width='300' height='200'></canvas>
    <script>
      const canvas = document.querySelector('canvas');
      const ctx = canvas.getContext("2d");
      ctx.arc(150, 100, 90, 0, 2 * Math.PI); ctx.stroke();
      ctx.arc(150, 100, 60, 0, 2 * Math.PI); ctx.stroke();
      ctx.arc(150, 100, 30, 0, 2 * Math.PI); ctx.stroke();
    </script><br>
  </body>
</html>
Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 010.html 

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>Canvas</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
    <link rel='stylesheet' href='canvas.css'>
  </head>
  <body>
    <h1>Rysowanie w obiekcie canvas - łuki</h1>
    <canvas width='300' height='200'></canvas>
    <script>
      const canvas = document.querySelector('canvas');
      const ctx = canvas.getContext("2d");
      ctx.beginPath(); ctx.arc(150, 100, 90, 0, 2 * Math.PI); ctx.stroke();
      ctx.beginPath(); ctx.arc(150, 100, 60, 0, Math.PI); ctx.stroke();
      ctx.beginPath(); ctx.arc(150, 100, 30, Math.PI, 0); ctx.stroke();
    </script><br>
  </body>
</html>
Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 010a.html 

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>Canvas</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
    <link rel='stylesheet' href='canvas.css'>
  </head>
  <body>
    <h1>Rysowanie w obiekcie canvas - łuki</h1>
    <canvas width='300' height='200'></canvas>
    <script>
      const canvas = document.querySelector('canvas');
      const ctx = canvas.getContext("2d");
      ctx.beginPath(); ctx.arc(150, 100, 90, 0, 2 * Math.PI); ctx.stroke();
      ctx.beginPath(); ctx.arc(150, 100, 70, 0, Math.PI); ctx.stroke();
      ctx.beginPath(); ctx.arc(150, 100, 50, 0, Math.PI, false); ctx.stroke();
      ctx.beginPath(); ctx.arc(150, 100, 30, 0, Math.PI, true); ctx.stroke();
    </script><br>
  </body>
</html>
Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 011.html 

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>Canvas</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
    <link rel='stylesheet' href='canvas.css'>
  </head>
  <body>
    <h1>Łuki, koła i wycinki koła</h1>
    <canvas width='300' height='200'></canvas>
    <script>
      const canvas = document.querySelector('canvas');
      const ctx = canvas.getContext("2d");
      ctx.beginPath(); ctx.arc(150, 100, 90, 0, 2 * Math.PI); 
      ctx.stroke(); ctx.fillStyle = 'yellow'; ctx.fill();
      ctx.beginPath(); ctx.arc(150, 100, 70, 0, Math.PI);
      ctx.lineWidth = 10; ctx.strokeStyle = 'white'; ctx.stroke();
      ctx.beginPath(); ctx.arc(150, 100, 50, 0, Math.PI, false); 
      ctx.fillStyle = 'red'; ctx.fill();
      ctx.beginPath(); ctx.arc(150, 100, 30, 0, Math.PI, true); 
      ctx.fillStyle = '#0000FF'; ctx.fill();
    </script><br>
  </body>
</html>
Podgląd w nowym oknieWalidacjaPobierz plik