Buenos días:
Os pongo al final un código que me funciona cuando lo ejecuto con un ratón, pero cuando lo intento en el iPad con el dedo no me funciona, salvo el boton de limpiar.
Código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Dibujar con JQuery & Canvas</title>
<link rel="stylesheet" type="text/css" href="EstiloT0404.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ga.js"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var clic=false;
var xCoord,yCoord="";
var canvas=document.getElementById("can");
var cntx=canvas.getContext("2d");
cntx.strokeStyle="red";
cntx.lineWidth=10;
cntx.lineCap="round";
cntx.fillStyle="#fff";
cntx.fillRect(0,0,canvas.width,canvas.height);
$("#can").mousedown(function(canvas){
clic=true;
cntx.save();
xCoord=canvas.pageX-this.offsetLeft;
yCoord=canvas.pageY-this.offsetTop
});
$(document).mouseup(function(){
clic=false
});
$(document).click(function(){
clic=false
});
$("#can").mousemove(function(canvas){
if(clic==true){
cntx.beginPath();
cntx.moveTo(canvas.pageX-this.offsetLeft,canvas.pageY-this.offsetTop);
cntx.lineTo(xCoord,yCoord);
cntx.stroke();
cntx.closePath();
xCoord=canvas.pageX-this.offsetLeft;
yCoord=canvas.pageY-this.offsetTop
}
});
$("#clr > div").click(function(){
cntx.strokeStyle=$(this).css("background-color");
cntx.lineWidth=10;
});
$("#borrador").click(function(){
cntx.strokeStyle="#fff";
});
$("#borrador2").click(function(){
cntx.strokeStyle="#9ecc3b";
cntx.lineWidth=40;
});
$("#limpiar").click(function(){
cntx.fillStyle="#9ecc3b";
cntx.fillRect(0,0,canvas.width, canvas.height);
})
});
</script>
<canvas id="can" width="500" height="300" ></canvas>
<div id="clr">
<div style="background-color:black;"></div>
<div style="background-color:red;"></div>
<div style="background-color:green;"></div>
<div style="background-color:orange;"></div>
<div style="background-color:#FFFF00;"></div>
<div style="background-color:#F43059;"></div>
<div style="background-color:#ff00ff;"></div>
<div style="background-color:#9ecc3b;"></div>
<div style="background-color:#fbd;"></div>
<div style="background-color:#fff460;"></div>
<div style="background-color:#F43059;"></div>
<div style="background-color:#82B82C;"></div>
<div style="background-color:#0099FF;"></div>
<div style="background-color:#ff00ff;"></div>
<div style="background-color:rgb(128,0,255);"></div>
<div style="background-color:rgb(255,128,0);"></div>
<div style="background-color:rgb(153,254,0);"></div>
<div style="background-color:rgb(18,0,255);"></div>
<div style="background-color:rgb(255,28,0);"></div>
<div style="background-color:rgb(13,54,0);"></div>
</div>
<div id="limpiar">Limpiar</div>
<div id="borrador">Borrador</div>
<div id="borrador2">Borrador Grande</div>
</body>
</html>
Muchas gracias
