draw on canvas by @Codewith.it - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<meta>Definisce i meta dati di una pagina web.
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
autofocusAttiva un elemento al caricamento della pagina.
maxImposta il valore numerico o temporale massimo per un elemento input
<tr>Definisce le righe di una tabella (rows)

Users

Log in to search for users

Explore

Find inspiration

X-Dsigner (Blu Eletric) – WebKin

5/10/24 es. 7 -parole ripetute

Mario-Block.html

esercitazione n1

Prova bandiere 14/04/2023

Review of Functions I

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html >
  <body>
    <div class="cont">
      <div id="tools">
        <h3>
          Impostazioni
        </h3>
        <label for="spessore">Spessore pennello
        </label>
        <input id="spessore" type="range" min="1" max="30" value="10" onchange="AggiornaTools()">
        <br>  
        <br> 
        <label for="colore">Colore
        </label>
        <input id="colore" type="color" onchange="AggiornaTools()">
        <br>  
        <br> 
        <label for="forma">Forma
        </label>
        <select id="forma" onchange="AggiornaTools()">
          <option value="round">Rotondo
          </option>
          <option value="square">Quadrato
          </option> 
          <option value="butt">Linea
          </option>
        </select>
        <br>
        <br>
        <button onclick="Reset()">
          Cancella tutto
        </button>
      </div>
      <div id="area">
        <canvas id="canvas">
        </canvas>
      </div>
    </div>
  </body>
</html>

body{
  font-family:"arial"
}
.cont{
  display:flex;
  margin:auto;
}
.cont > div{
  flex:1 ;
}
canvas{
  background: white;
  border:solid 1px grey;
  cursor:crosshair;
}
#tools{
  background:rgba(228,228,228,0.7);
  padding:20px 5px;
  text-align:center;
  max-width:300px;
}

var pennello;
var colore;
var spessore;
var crd = { x: 0, y: 0 };
var paint = false;
var canvasArea = document.querySelector('#canvas');
var ctxx = canvasArea.getContext('2d');

function Reset() {
  ctxx.canvas.width = 500;
  ctxx.canvas.height = 500;
}

function AggiornaTools() {
  pennello = document.getElementById("forma").value;
  colore = document.getElementById("colore").value;
  spessore = document.getElementById("spessore").value;
}

function Posizione(event) {
  // Gestisci sia eventi touch che mouse
  if (event.touches) {
    crd.x = event.touches[0].clientX - canvasArea.offsetLeft;
    crd.y = event.touches[0].clientY - canvasArea.offsetTop;
  } else {
    crd.x = event.clientX - canvasArea.offsetLeft;
    crd.y = event.clientY - canvasArea.offsetTop;
  }
}

function Draw(event) {
  event.preventDefault(); // Previene lo scrolling durante il disegno
  paint = true;
  Posizione(event);
}

function Stop(event) {
  event.preventDefault(); // Previene lo scrolling
  paint = false;
}

function Move(event) {
  if (!paint) return;
  event.preventDefault(); // Previene lo scrolling durante il movimento
  ctxx.beginPath();
  ctxx.lineWidth = spessore;
  ctxx.lineCap = pennello;
  ctxx.strokeStyle = colore;
  ctxx.moveTo(crd.x, crd.y);
  Posizione(event);
  ctxx.lineTo(crd.x, crd.y);
  ctxx.stroke();
}

// Inizializza
window.addEventListener('load', () => {
  Reset();
  AggiornaTools();

  // Eventi mouse
  canvasArea.addEventListener('mousedown', Draw);
  canvasArea.addEventListener('mouseup', Stop);
  canvasArea.addEventListener('mousemove', Move);

  // Eventi touch
  canvasArea.addEventListener('touchstart', (event) => {
    event.preventDefault(); // Previene lo scrolling
    Draw(event);
  }, { passive: false });

  canvasArea.addEventListener('touchend', (event) => {
    event.preventDefault(); // Previene lo scrolling
    Stop(event);
  }, { passive: false });

  canvasArea.addEventListener('touchmove', (event) => {
    event.preventDefault(); // Previene lo scrolling
    Move(event);
  }, { passive: false });

  // Evento reset
  window.addEventListener('reset', Reset);
});