Jquery Scratch card Example Tutorial

Css , Html , Jquery

Nicesnippets

1967

22-11-2020


Jquery Scratch card Example Tutorial

Hi Guys,

Today,I will learn you how to create scratch card useing jquery.we will show example of Jquery Scratch card. i will canvas useing create scratch card.you can easy to create Scratch card useing jquery.

Here, I will give you full example for simply Scratch card using Jquery as bellow.

Example


<html>

<head>

<title>Jquery Scratch card Example Tutorial - Nicesnippets.com</title>

<style>

body {

padding: 20px 0;

}

.container {

position: relative;

width: 300px;

height: 300px;

margin: 0 auto;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

-o-user-select: none;

user-select: none;

border:2px solid #f5f5f5;

box-shadow:inset 0 0 10px #000000;

}

.canvas {

position: absolute;

top: 0;

}

h2,h1{

text-align: center;

}

.form {

padding: 20px;

}

img{

width: 150px;

}

</style>

</head>

<body>

<h1>Jquery Scratch Card Example - Nicesnippets.com</h1>

<div class="container" id="js-container">

<canvas class="canvas" id="js-canvas" width="300" height="300"></canvas>

<form class="form" style="visibility: hidden;">

<h2>Hurray you won</h2>

<h1 ><code>$200</code></h1>

<img src="https://www.nicesnippets.com/image/3-2-gift-transparent.png" alt="">

</div>

</form>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

<script>

(function() {

'use strict';

var isDrawing, lastPoint;

var container = document.getElementById('js-container'),

canvas = document.getElementById('js-canvas'),

canvasWidth = canvas.width,

canvasHeight = canvas.height,

ctx = canvas.getContext('2d'),

image = new Image(),

brush = new Image();

// base64 Workaround because Same-Origin-Policy

image.src = 'https://png.pngtree.com/thumb_back/fw800/background/20191009/pngtree-wavy-black-white-line-background-image_318760.jpg';

image.onload = function() {

ctx.drawImage(image, 0, 0);

// Show the form when Image is loaded.

document.querySelectorAll('.form')[0].style.visibility = 'visible';

};

brush.src = 'https://www.nicesnippets.com/image/scarchimagetrans.png';

canvas.addEventListener('mousedown', handleMouseDown, false);

canvas.addEventListener('touchstart', handleMouseDown, false);

canvas.addEventListener('mousemove', handleMouseMove, false);

canvas.addEventListener('touchmove', handleMouseMove, false);

canvas.addEventListener('mouseup', handleMouseUp, false);

canvas.addEventListener('touchend', handleMouseUp, false);

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 );

}

// Only test every `stride` pixel. `stride`x faster,

// but might lead to inaccuracy

function getFilledInPixels(stride) {

if (!stride || stride < 1) { stride = 1; }

var pixels = ctx.getImageData(0, 0, canvasWidth, canvasHeight),

pdata = pixels.data,

l = pdata.length,

total = (l / stride),

count = 0;

// Iterate over all pixels

for(var i = count = 0; i < l; i += stride) {

if (parseInt(pdata[i]) === 0) {

count++;

}

}

return Math.round((count / total) * 100);

}

function getMouse(e, canvas) {

var offsetX = 0, offsetY = 0, mx, my;

if (canvas.offsetParent !== undefined) {

do {

offsetX += canvas.offsetLeft;

offsetY += canvas.offsetTop;

} while ((canvas = canvas.offsetParent));

}

mx = (e.pageX || e.touches[0].clientX) - offsetX;

my = (e.pageY || e.touches[0].clientY) - offsetY;

return {x: mx, y: my};

}

function handlePercentage(filledInPixels) {

filledInPixels = filledInPixels || 0;

console.log(filledInPixels + '%');

if (filledInPixels > 50) {

canvas.parentNode.removeChild(canvas);

}

}

function handleMouseDown(e) {

isDrawing = true;

lastPoint = getMouse(e, canvas);

}

function handleMouseMove(e) {

if (!isDrawing) { return; }

e.preventDefault();

var currentPoint = getMouse(e, canvas),

dist = distanceBetween(lastPoint, currentPoint),

angle = angleBetween(lastPoint, currentPoint),

x, y;

for (var i = 0; i < dist; i++) {

x = lastPoint.x + (Math.sin(angle) * i) - 25;

y = lastPoint.y + (Math.cos(angle) * i) - 25;

ctx.globalCompositeOperation = 'destination-out';

ctx.drawImage(brush, x, y);

}

lastPoint = currentPoint;

handlePercentage(getFilledInPixels(32));

}

function handleMouseUp(e) {

isDrawing = false;

}

})();

</script>

</body>

</html>

It will help you...


Recommended Posts