HTML5 canvas Sprite Tutorial

To create a sprite with Konva, we can instantiate a Konva.Sprite() object.

For a full list of attributes and methods, check out the Konva.Sprite documentation.

Konva Sprite Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Sprite Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
#punch {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<button id="punch">Punch</button>
<script>
var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});

var layer = new Konva.Layer();
var animations = {
idle: [
// x, y, width, height (4 frames)
2, 2, 70, 119, 71, 2, 74, 119, 146, 2, 81, 119, 226, 2, 76, 119,
],
punch: [
// x, y, width, height (4 frames)
2, 138, 74, 122, 76, 138, 84, 122, 346, 138, 120, 122,
],
};

var imageObj = new Image();
imageObj.onload = function () {
var blob = new Konva.Sprite({
x: 50,
y: 50,
image: imageObj,
animation: 'idle',
animations: animations,
frameRate: 7,
frameIndex: 0,
});

// add the shape to the layer
layer.add(blob);

// add the layer to the stage
stage.add(layer);

// start sprite animation
blob.start();

// resume transition
document.getElementById('punch').addEventListener(
'click',
function () {
blob.animation('punch');
blob.on('frameIndexChange.button', function () {
if (this.frameIndex() === 2) {
setTimeout(function () {
blob.animation('idle');
blob.off('.button');
}, 1000 / blob.frameRate());
}
});
},
false
);
};
imageObj.src = '/assets/blob-sprite.png';
</script>
</body>
</html>
Enjoying Konva? Please consider to support the project.