este es mi código y me dibuja si presiono el mouse, alguien me puede ayudar para que el codigo me funcione gracias

Gladys Lucia Andrade Arcos

Pregunta

student•hace 4 años

Gladys Lucia Andrade Arcos

student•hace 4 años

anthony muchas gracias. voy hacer lo que me dices y revisar que falta en mi código para agregarlo.

Anthony Ismael Manotoa Moreno

student•hace 4 años

Mira este otro código en el que especifica cada parte lo que hace. Replica lo del event listener y las funciones que mueven el mouse que es lo que le falta a tu código

//Enlazando con HTML
var lienzo = document.getElementById("area_de_dibujo");
var pantalla = lienzo.getContext("2d");

//Variables
var estado_mouse = 0;
var x;
var y;
var color_borde = "black";
var color_linea = document.getElementById("color_dibujo");
var grosor_lapiz = document.getElementById("grosor_lapiz");
var limpiar = document.getElementById("limpiar").addEventListener("click", limpiarPantalla);

//Escuchador de eventos:
document.addEventListener("mousemove",dibujarUnTraso);
document.addEventListener("mousedown",mouseAbajo);
document.addEventListener("mouseup",mouseArriba);

//Borde area de dibujo
dibujarLinea(color_borde, 1,1,1,499);
dibujarLinea(color_borde, 1,399,999,399);
dibujarLinea(color_borde, 999,399,999,0);
dibujarLinea(color_borde, 999,1,1,1);

//Funcion principal:
function dibujarLinea(color,xi,yi,xf,yf)
{
  pantalla.beginPath();
  pantalla.strokeStyle = color;
  pantalla.lineWidth = grosor_lapiz.value;
  pantalla.moveTo(xi,yi);
  pantalla.lineTo(xf,yf);
  pantalla.stroke();
  pantalla.closePath();
}

//Funciones secundarias:
function dibujarUnTraso(eventos)
{
    if (estado_mouse == 1)
    {
        dibujarLinea(color_linea.value,x,y,eventos.offsetX,eventos.offsetY);
    }
    x = eventos.offsetX;
    y = eventos.offsetY;
}

function mouseAbajo(eventos)
{
    estado_mouse = 1;
    x = eventos.offsetX;
    y = eventos.offsetY;
    console.log(x,y);
}

function mouseArriba(eventos)
{
    estado_mouse = 0;
    x = eventos.offsetX;
    y = evento.offsetY;
}

//Borrar o limpiar la ventana de dibujo
function limpiarPantalla(evento)
{
    pantalla.clearRect(0, 0, lienzo.width, lienzo.height);
    dibujarLinea(color_borde, 1,1,1,499);
    dibujarLinea(color_borde, 1,399,999,399);
    dibujarLinea(color_borde, 999,399,999,0);
    dibujarLinea(color_borde, 999,1,1,1);
}```

Gladys Lucia Andrade Arcos

student•hace 4 años

Este es mi código y no me dibuja si presiono el mouse, alguien me puede ayudar para que el código me funcione gracias.

código html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dibujando con Mouse</title>
  </head>
  <body>
    <canvas width="300" height="300" id="area_dibujo"></canvas>
    <p>dibuja con el mouse</p>
    <script src="trazos.js"></script>
  </body>
</html>
>

código.js

document.addEventListener("mousedown", dibujarClick);
var cuadro = document.getElementById("area_dibujo");
var papel = cuadro.getContext("2d");
var estado = 0
var colorcito = "blue"
var x;
var y;

dibujarLinea(colorcito, 0, 300, 0, 0, papel)
dibujarLinea(colorcito, 300, 300, 0, 300, papel)
dibujarLinea(colorcito, 300, 0, 300, 300, papel)
dibujarLinea(colorcito, 0, 0, 300, 0, papel)

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal, lienzo)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = 3;
  lienzo.moveTo(xinicial, yinicial);
  lienzo.lineTo(xfinal, yfinal);
  lienzo.stroke();
  lienzo.closePath();
}

function dibujarClick(evento)
{
  if(estado == 1)
  {
   x = evento.layerX;
   y = evento.layerY;
  }
}

Anthony Ismael Manotoa Moreno

student•hace 4 años

Hola, no se puede ver, hay un error en la subida de imágenes 😅 Podrías también subirlo como código

Conel botón de "Insertar código" de los comentarios

este es mi código y me dibuja si presiono el mouse, alguien me puede ayudar para que el codigo me funcione gracias

Curso Gratis de Programación Básica

Curso Gratis de Programación Básica