Rotation

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();
    img.src = 'http://www.html5canvastutorials.com/demos/assets/map-background.png';
    img2.src = 'http://www.html5canvastutorials.com/demos/assets/greenstars.jpg';
    
    var r = 22.5;
    var hexagon = new Kinetic.RegularPolygon({
        x: 150,
        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) {
        setTimeout(function() {
            hexagon.transitionTo({
                alpha: 0.1,
                duration: 2,
                callback: function() {
                    load_image();
                }

            });
        }, 1000);
    }

    set_comb_images(hexagon);

    function load_image() {
        setTimeout(function() {
            hexagon.transitionTo({
                alpha: 1,
                duration: 3,
                rotation: Math.PI * 8
            });
        }, 2000);
        hexagon.setAttrs({
            fill: {
                image: img2,
                offset: [-250, -240]
            }
        });
    }


};