Scale+rotate-2

by hiral

HTML

<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.2.js"></script>
<div id="container"></div>

JavaScript

window.onload = function() {
    var stage = new Kinetic.Stage({
        container: "container",
        width: 578,
        height: 200
    });

    var layer = new Kinetic.Layer();
    var img = new Image();
    var img2 = new Image();
    var img3 = new Image();
    img3.src = 'http://www.html5canvastutorials.com/demos/assets/pixel-art.gif';

    var r = 22.5;
    var hexagon = new Kinetic.RegularPolygon({
        x: 100,
        y: 100,
        sides: 6,
        radius: r,
        stroke: '#6B2F00',
        strokeWidth: 0.5,
        fill: {
            start: {
                x: 0,
                y: 0,
                radius: 0
            },
            end: {
                x: 0,
                y: 0,
                radius: r + 25
            },
            colorStops: [0, '#FFF4A3', 1, '#E87F00']
        },
        shadow: {
            color: '#6B2F00',
            blur: 0.5,
            offset: [2, 2],
            alpha: 0.5
        }
    });

    layer.add(hexagon);
    stage.add(layer);

    function set_comb_images(hexagon) {
        var newx = hexagon.getX();
        var newy = hexagon.getY();
        var temp = Math.floor((Math.random()*100));
        var selector = Math.floor((Math.random()*4))+1;
        switch (selector){
            case 1:{
                    newx += temp;
                    newy += temp;
                }
        case 2:{
            newx += temp;
            newy -= temp;
        }
        case 3:{
            newx -= temp;
            newy += temp;
        }
        case 4:{
            newx -= temp;
            newy -= temp;
        }}
        
        setTimeout(function() {
            hexagon.transitionTo({
                x: newx,
                y: newy,            
                alpha: 0.1,
                duration: 1,
                scale: {
                    x: 1.2,
                    y: 1.2
                },
                callback: function() {
                    load_image();
                }

   ...