Introduction to Konva
Konva is a powerful and versatile HTML5 canvas library that enables developers to create complex drawings and animations with ease. It abstracts much of the low-level work behind creating and managing canvas elements, providing a cleaner, more user-friendly API. Whether you’re building a game, a dynamic visualisation, or an interactive art piece, Konva makes it all more straightforward.
Basic Tutorials and API Examples
Setting Up Konva
First, you’ll want to include the Konva library in your project. You can do this by adding the following script tag in your HTML:
<script src="https://cdn.rawgit.com/konvajs/konva/2.6.0/konva.min.js"></script>
Creating a Stage and Layers
The basic building blocks in Konva are stages and layers. A stage is the container for everything, while a layer is a canvas layer inside the stage. Here’s a simple example:
const stage = new Konva.Stage({
container: 'container', // id of container
width: 500,
height: 500,
});
const layer = new Konva.Layer();
stage.add(layer);
Drawing Shapes
Konva makes it easy to draw various shapes. Here’s how you can draw a rectangle and a circle:
const rect = new Konva.Rect({
x: 100,
y: 100,
width: 100,
height: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 2,
});
const circle = new Konva.Circle({
x: 200,
y: 200,
radius: 50,
fill: 'blue',
stroke: 'black',
strokeWidth: 2,
});
layer.add(rect);
layer.add(circle);
layer.draw();
Handling Events
Konva supports various events. Let’s add a click event to our rectangle:
rect.on('click', function () {
alert('Rectangle clicked!');
});
Animating Shapes
Animating shapes in Konva is also relatively straightforward. Here’s an example of moving a circle across the canvas:
const anim = new Konva.Animation(function (frame) {
const time = frame.time / 1000;
circle.x(100 + Math.sin(time) * 100);
}, layer);
anim.start();
App Example
Combining the above elements, we can create a simple interactive application:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/konvajs/konva/2.6.0/konva.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
const stage = new Konva.Stage({
container: 'container',
width: 500,
height: 500,
});
const layer = new Konva.Layer();
stage.add(layer);
const rect = new Konva.Rect({
x: 100,
y: 100,
width: 100,
height: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 2,
});
rect.on('click', function () {
alert('Rectangle clicked!');
});
const circle = new Konva.Circle({
x: 200,
y: 200,
radius: 50,
fill: 'blue',
stroke: 'black',
strokeWidth: 2,
});
const anim = new Konva.Animation(function (frame) {
const time = frame.time / 1000;
circle.x(100 + Math.sin(time) * 100);
}, layer);
layer.add(rect);
layer.add(circle);
layer.draw();
anim.start();
</script>
</body>
</html>
This example sets up a stage and a layer, adds a rectangle with a click event and animates a circle moving across the canvas.
Hash: 0806683e3665b61c4180b8e848c68121f0c37c3db9cf1f2e5e90993373be2be8
