<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Animation Stress Test Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
function update(layer, frame) {
var angularSpeed = 100;
var angularDiff = (angularSpeed * frame.timeDiff) / 1000;
var shapes = layer.getChildren();
for (var n = 0; n < shapes.length; n++) {
var shape = shapes[n];
shape.rotate(angularDiff);
}
}
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
/*
* setting the listening property to false will improve
* drawing performance because the rectangles won't have to be
* drawn onto the hit graph
*/
var layer = new Konva.Layer({
listening: false,
});
var colors = [
'red',
'orange',
'yellow',
'green',
'blue',
'cyan',
'purple',
];
var colorIndex = 0;
for (var i = 0; i < 300; i++) {
var color = colors[colorIndex++];
if (colorIndex >= colors.length) {
colorIndex = 0;
}
var randWidth = Math.random() * 100 + 20;
var randHeight = Math.random() * 100 + 20;
var randX = Math.random() * stage.width() - 20;
var randY = Math.random() * stage.height() - 20;
var box = new Konva.Rect({
x: randX,
y: randY,
offset: {
x: randWidth / 2,
y: randHeight / 2,
},
width: randWidth,
height: randHeight,
fill: color,
stroke: 'black',
strokeWidth: 4,
});
layer.add(box);
}
stage.add(layer);
var anim = new Konva.Animation(function (frame) {
update(layer, frame);
}, layer);
anim.start();
</script>
</body>
</html>
|