Buongiorno a tutti,
ho uno script con la funziona di gratta e vinci ma non mi funzina la condizione se viene grattato l'80% fai uscire un alert o meglio ancora un animazione... vi allego il codice:
codice:
<script type="text/javascript">
window.onload = function () {
// CANVAS con la scritta del premio
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var txt = document.getElementById("hidTesto").value;
if (txt.length > 30) {
ctx.font = '24pt Arial';
}
else {
ctx.font = '30pt Arial';
}
ctx.fillStyle = 'Black';
ctx.textAlign = "center";
ctx.fillText(txt, 300, 150);
canvas.style.left = "190px";
canvas.style.top = "270px";
canvas.style.position = "absolute";
// CANVAS con la parte argentata
var canvas2 = document.getElementById('canvas2');
var ctx2 = canvas2.getContext("2d");
var img = new Image();
img.src = "../images/iPad/gratta_qui.png";
img.onload = function () {
var pattern = ctx2.createPattern(img, "");
ctx2.fillStyle = pattern;
// ctx2.fillStyle = 'Gray';
ctx2.fillRect(0, 0, 600, 350);
canvas2.style.left = "190px";
canvas2.style.top = "270px";
canvas2.style.position = "absolute";
}
imageData = ctx2.getImageData(0, 0, canvas2.width, canvas2.height); // Prendo tutti i pixel del canvas2 (argentato)
// Funzioni di manipolazione per aumentare il tratto (solo per movimento del mouse) -------------------
function distanceBetween(point1, point2) {
return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
}
function angleBetween(point1, point2) {
return Math.atan2(point2.x - point1.x, point2.y - point1.y);
}
// -----------------------------------------------------------------------------------------------------
// Determina la percentuale di pixel resi trasparenti --------------------------------------------------
function alphaRatio(ctx) {
var alphaPixels = 0;
var data = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height).data;
for (var i = 3; i < data.length; i += 4) {
if (data[i] > 0) alphaPixels++;
}
return alphaPixels / (ctx.canvas.width * ctx.canvas.height);
}
// ------------------------------------------------------------------------------------------------------
ctx2.lineJoin = ctx.lineCap = 'round';
var isDrawing, lastPoint;
/// ------------------------------------ Inizio del touch, rendo invisibile il tocco e inizio ad accettare il move
canvas2.ontouchstart = function (e) {
isDrawing = true;
var touches = e.changedTouches[0];
lastPoint = { x: touches.clientX - 190, y: touches.clientY - 270 };
ctx2.clearRect(lastPoint.x, lastPoint.y, 30, 30);
e.preventDefault();
};
/// ------------------------------------ Fine del touch
canvas2.ontouchend = function (e) {
isDrawing = false;
e.preventDefault();
};
/// ------------------------------------ Movimento sul canvas: rendo invisibili i pixel toccati e un loro intorno
canvas2.ontouchmove = function (e) {
if (!isDrawing) return;
var touches = e.changedTouches[0];
var currentPoint = { x: touches.clientX - 190, y: touches.clientY - 270 };
ctx2.clearRect(currentPoint.x, currentPoint.y, 30, 30);
lastPoint = currentPoint;
// Se ho già "grattato" l'80% dei pixel fornisco un messaggio di vittoria
var Perc = alphaRatio(ctx2);
if (Perc > 10) {
isDrawing = false;
alert(document.getElementById("hidTesto").value);
}
e.preventDefault();
};
};
</script>