JavaScript

JavaScript Grafika Nov zavihek

<!JavaScript Grafika risba.htm>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
      canvas {
             border: 1px solid black;
             width: 560px;
             height: 360px;
             }
    </style>
    <title>Risba</title>
  </head>
  <body>
    <h1>Risanje z miško</h1>
    <canvas id="risba" width="560" height="360"></canvas>
    <script language="JavaScript">
      let risem = false;let x = 0;let y = 0;
      const risba = document.getElementById('risba');
      const context = risba.getContext('2d');

risba.addEventListener('mousedown', e => {
        x = e.offsetX;y = e.offsetY;risem = true;
        });

risba.addEventListener('mousemove', e => {
        if (risem === true) {
          drawLine(context, x, y, e.offsetX, e.offsetY);
          x = e.offsetX;y = e.offsetY;
        }
      });

window.addEventListener('mouseup', e => {
        if (risem === true) {
          drawLine(context, x, y, e.offsetX, e.offsetY);
          x = 0;y = 0;risem = false;
        }
      });

function drawLine(context, x1, y1, x2, y2) {
        context.beginPath();context.strokeStyle = 'black';
        context.lineWidth = 1;context.moveTo(x1, y1);
        context.lineTo(x2, y2);context.stroke();
        context.closePath();
      }
    </script>
  </body>
  </html>