JavaScript - crear lineas en canvas pero mediante el click y movimiento del mouse

 
Vista:
sin imagen de perfil

crear lineas en canvas pero mediante el click y movimiento del mouse

Publicado por cristian (1 intervención) el 16/09/2017 23:06:48
hola mi nombre es cristian y tengo problemas en canvas.
el problema es que intento crear lineas en canvas pero mediante el click y movimiento del mouse


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
document.addEventListener("mousedown", apretarMouse);
document.addEventListener("mousemove" ,moverMouse);
document.addEventListener("mouseup", terminarDibujo);
var miDibujo= document.getElementById("area_de_dibujo");
var papel=miDibujo.getContext("2d")
var estado=false;
var colorito="blue";
var x;
var y;
var xl;
var yl;
 
function apretarMouse(evento)
{
console.log(evento);
    estado= true;
  dibujarLinea(colorito, 100, 100, 0, 0,papel)
    x=evento.screenX;
    y=evento.screenY;
 
}
function moverMouse(evento)
{
console.log(evento)
 if(estado==true)
  {
   //var posision=posision+1;
   var xl= evento.screenX ;
   var yl= evento.screenY;
 dibujarLinea(colorito,yl,xl, papel)
 
    //x=evento.clientX;
    //y=evento.clientY;
  }
}
 
function terminarDibujo(evento)
{
 
  estado = false;
  x=evento.clientX;
  y=evento.clientY;
 
}
 
function dibujarLinea(colorito, xinicial, yinicial, xfinal, yfinal, lienzo)
{
  lienzo.beginPath();
  lienzo.strokeStyle = colorito;
  lienzo.moveTo(xinicial, yinicial);
  lienzo.lineTo(xfinal, yfinal);
  lienzo.stroke();
  lienzo.closePath();
}


espero me puedan ayudar ya que soy nuevo en esto de programar con javascript y si pueden me pueden recomendar donde puedo empezar a aprender sobre esto libros o cursos (si es posible gratuitos )....igual tengo un poco de aprendizaje ...
de antemano gracias 4
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder