Click here for free DL of the app version that can save data.

No:22697

Un juego donde podamos dibujar como si fuera paint..ALL
Developer User3408｜Date and time 23/10/24 7:36:18
Build time 37.518 sec｜Game capacity 2.152KB｜

Script

¡Bienvenidos al juego de dibujo!

Haz clic y arrastra el dedo para dibujar en el lienzo.

Formas pre-hechas:

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<body>
<h1>¡Bienvenidos al juego de dibujo!</h1>
<p>Haz clic y arrastra el dedo para dibujar en el lienzo.</p>

<h2>Formas pre-hechas:</h2>
<button onclick="dibujarCirculo()">Círculo</button>
<button onclick="dibujarCuadrado()">Cuadrado</button>
<button onclick="dibujarTriangulo()">Triángulo</button>
<button onclick="limpiarLienzo()">Limpiar</button>

canvas.addEventListener("touchstart", inicioDibujo);
canvas.addEventListener("touchmove", dibujar);
canvas.addEventListener("touchend", finDibujo);
canvas.addEventListener("mousedown", inicioDibujo);
canvas.addEventListener("mousemove", dibujar);
canvas.addEventListener("mouseup", finDibujo);

function inicioDibujo(evento) {
  pintando = true;
  dibujar(evento);
}

function dibujar(evento) {
  if (!pintando) {
    return;
  }
  contexto.lineWidth = 5;
  contexto.lineCap = "round";
  contexto.strokeStyle = "black";
  contexto.lineTo(evento.touches[0].clientX - canvas.offsetLeft, evento.touches[0].clientY - canvas.offsetTop);
  contexto.stroke();
  contexto.beginPath();
  contexto.moveTo(evento.touches[0].clientX - canvas.offsetLeft, evento.touches[0].clientY - canvas.offsetTop);
}

function finDibujo() {
  pintando = false;
}

function dibujarCirculo() {
  contexto.beginPath();
  contexto.arc(300, 200, 50, 0, 2 * Math.PI);
  contexto.lineWidth = 5;
  contexto.strokeStyle = "black";
  contexto.stroke();
}

function dibujarCuadrado() {
  contexto.beginPath();
  contexto.rect(250, 150, 100, 100);
  contexto.lineWidth = 5;
  contexto.strokeStyle = "black";
  contexto.stroke();
}

function dibujarTriangulo() {
  contexto.beginPath();
  contexto.moveTo(350, 150);
  contexto.lineTo(450, 250);
  contexto.lineTo(250, 250);
  contexto.lineTo(350, 150);
  contexto.lineWidth = 5;
  contexto.strokeStyle = "black";
  contexto.stroke();
}

function limpiarLienzo() {
  contexto.clearRect(0, 0, canvas.width, canvas.height);
}
</script>

</body>
</html>