Buenas tardes:
Tengo el código que os pongo a continuación:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Desktops and Tablets</title>
<script type="text/javascript" src="jquery-3.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>
<style type="text/css">
#clr div{
cursor:pointer;
width:30px;
height:30px;
float:left;
}
#limpiar, #borrador, #borrador2, #pincelgrande, .clr2{
width:120px;
height:120px;
box-shadow:2px 2px 2px #000000;
background-color:#FC3;
margin:0 10px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#FFF;
font-variant:small-caps;
float:left;
text-align:center;
padding:6px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
initialize();
});
// works out the X, Y position of the click inside the canvas from the X, Y position on the page
function getPosition(mouseEvent, sigCanvas) {
var x, y;
if (mouseEvent.pageX != undefined && mouseEvent.pageY != undefined) {
x = mouseEvent.pageX;
y = mouseEvent.pageY;
} else {
x = mouseEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = mouseEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return { X: x - sigCanvas.offsetLeft, Y: y - sigCanvas.offsetTop };
}
function initialize() {
// get references to the canvas element as well as the 2D drawing context
var sigCanvas = document.getElementById("canvasSignature");
var context = sigCanvas.getContext("2d");
context.strokeStyle="red";
context.lineWidth=10;
context.lineCap="round";
context.fillStyle="#fff";
context.fillRect(0,0,sigCanvas.width,sigCanvas.hei ght);
// This will be defined on a TOUCH device such as iPad or Android, etc.
var is_touch_device = 'ontouchstart' in document.documentElement;
if (is_touch_device) {
// create a drawer which tracks touch movements
var drawer = {
isDrawing: false,
touchstart: function (coors) {
context.beginPath();
context.moveTo(coors.x, coors.y);
this.isDrawing = true;
},
touchmove: function (coors) {
if (this.isDrawing) {
context.lineTo(coors.x, coors.y);
context.stroke();
}
},
touchend: function (coors) {
if (this.isDrawing) {
this.touchmove(coors);
this.isDrawing = false;
}
}
};
// create a function to pass touch events and coordinates to drawer
function draw(event) {
// get the touch coordinates. Using the first touch in case of multi-touch
var coors = {
x: event.targetTouches[0].pageX,
y: event.targetTouches[0].pageY
};
// Now we need to get the offset of the canvas location
var obj = sigCanvas;
if (obj.offsetParent) {
// Every time we find a new object, we add its offsetLeft and offsetTop to curleft and curtop.
do {
coors.x -= obj.offsetLeft;
coors.y -= obj.offsetTop;
}
// The while loop can be "while (obj = obj.offsetParent)" only, which does return null
// when null is passed back, but that creates a warning in some editors (i.e. VS2010).
while ((obj = obj.offsetParent) != null);
}
// pass the coordinates to the appropriate handler
drawer[event.type](coors);
}
// attach the touchstart, touchmove, touchend event listeners.
sigCanvas.addEventListener('touchstart', draw, false);
sigCanvas.addEventListener('touchmove', draw, false);
sigCanvas.addEventListener('touchend', draw, false);
// prevent elastic scrolling
sigCanvas.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);
}
else {
// start drawing when the mousedown event fires, and attach handlers to
// draw a line to wherever the mouse moves to
$("#canvasSignature").mousedown(function (mouseEvent) {
var position = getPosition(mouseEvent, sigCanvas);
context.moveTo(position.X, position.Y);
context.beginPath();
// attach event handlers
$(this).mousemove(function (mouseEvent) {
drawLine(mouseEvent, sigCanvas, context);
}).mouseup(function (mouseEvent) {
finishDrawing(mouseEvent, sigCanvas, context);
}).mouseout(function (mouseEvent) {
finishDrawing(mouseEvent, sigCanvas, context);
});
});
}
}
// draws a line to the x and y coordinates of the mouse event inside
// the specified element using the specified context
function drawLine(mouseEvent, sigCanvas, context) {
var position = getPosition(mouseEvent, sigCanvas);
context.lineTo(position.X, position.Y);
context.stroke();
$("#clr > div").click(function(){
context.strokeStyle=$(this).css("background-color");
context.lineWidth=10;
});
$("#borrador").click(function(){
context.strokeStyle="#fff";
context.lineWidth=10;
});
$("#borrador2").click(function(){
context.strokeStyle="#fff";
context.lineWidth=40;
});
$("#limpiar").click(function(){
context.fillStyle="#fff";
context.fillRect(0,0,canvasSignature.width, canvasSignature.height);
});
}
// draws a line from the last coordiantes in the path to the finishing
// coordinates and unbind any event handlers which need to be preceded
// by the mouse down event
function finishDrawing(mouseEvent, sigCanvas, context) {
// draw the line to the finishing coordinates
drawLine(mouseEvent, sigCanvas, context);
context.closePath();
// unbind any events which could draw
$(sigCanvas).unbind("mousemove")
.unbind("mouseup")
.unbind("mouseout");
}
</script>
<h1>Canvas test</h1>
<!-- It's bad practice (to me) to put your CSS here. I'd recommend the use of a CSS file! -->
<canvas id="canvasSignature" width="500px" height="500px" style="border:2px solid #000000;"></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> <br><br><br>
<div id="limpiar">Limpiar</div>
<div id="borrador">Borrador</div>
<div id="borrador2">Borrador Grande</div>
</body>
</html>
En el ordenador con el ratón, todo funciona, cuando selecciono una caja me cambia el color, me cambia al borrador, etc.
Pero cuando lo llevo al iPad, puedo pintar con el primer color, pero no