<button onclick="javascript:play()">Play</button><br>
<canvas id="canvas" width="300" height="300"></canvas>
<img src="https://solitaired.com/images/style-classic-2/heart_13.png" width="201" height="289" id="heart_13" style="display:none;">
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
const cardName = 'heart_13';
const cardWidth = 100;
const cardHeight = 145;
const cardPadding = 10;
let imagesCanvas = {};
function getEase(currentProgress, start, distance, steps) {
currentProgress /= steps/2;
if (currentProgress <= 1) {
return (distance/2)*currentProgress*currentProgress + start;
}
currentProgress--;
return -1*(distance/2) * (currentProgress*(currentProgress-2) - 1) + start;
}
function getX(params) {
let distance = params.xTo - params.xFrom;
let steps = params.frames;
let currentProgress = params.frame;
return getEase(currentProgress, params.xFrom, distance, steps, 3);
}
function getY(params) {
let distance = params.yTo - params.yFrom;
let steps = params.frames;
let currentProgress = params.frame;
return getEase(currentProgress, params.yFrom, distance, steps, 3);
}
function addImage(params) {
let name = params.name;
if (imagesCanvas[name] === undefined) {
imagesCanvas[name] = document.createElement('canvas');
}
imagesCanvas[name].width = cardWidth;
imagesCanvas[name].height = cardHeight;
let image = document.getElementById(name);
let imageCtx = imagesCanvas[name].getContext('2d');
imageCtx.clearRect(0, 0, cardWidth, cardHeight);
imageCtx.drawImage(image, 0, 0, cardWidth, cardHeight);
ctx.drawImage(imagesCanvas[name], getX(params), getY(params));
if (params.frame < params.frames) {
params.frame = params.frame + 1;
window.requestAnimationFrame(drawCanvas);
window.requestAnimationFrame(addImage.bind(null, params))
}
}
function drawCanvas() {
ctx.fillStyle = 'rgb(0,80,0)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function play() {
drawCanvas();
addImage({
name: cardName,
frame: 0,
frames: 100,
xFrom: cardPadding,
xTo: canvasWidth - cardWidth - cardPadding,
yFrom: cardPadding,
yTo: canvasHeight - cardHeight - cardPadding
});
}
window.onload = play;
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.