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://cdn.rawgit.com/konvajs/konva/1.6.2/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: [
2, 2, 70, 119,
71, 2, 74, 119,
146, 2, 81, 119,
226, 2, 76, 119
],
punch: [
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.setAnimation('punch');
blob.on('frameIndexChange.button', function() {
if (this.frameIndex() === 2) {
setTimeout(function() {
blob.setAnimation('idle');
blob.off('.button');
}, 1000 / blob.frameRate());
}
});
}, false);
};
imageObj.src = '/assets/blob-sprite.png';
</script>
</body>
</html>