Skip to content
An HTML5 Canvas Coverflow like library
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Canvasflow.js
LICENSE
README.markdown

README.markdown

Canvasflow - A HTML5 Canvas Coverflow like library.

Canvasflow is an HTML5 Canvas library that creates a Coverflow like effect on an HTML5 canvas. Just point it at some images and set a few variables and you should be good to go.

Dependencies: underscore.js, ninja.js

Useage:

var imageUrls = ['image1.png', 'image2.png', image3.png'];

loadImages(imageUrls, function(images){
    var container = document.getElementById('canvasflow-container');
    var flow = new Canvasflow({
        width: 400,
        height: 400,
        container: container,
        images: images
    });
});


function loadImages(imageUrls, after){
    var images = [];
    var i = 0;
    imageUrls.forEach(function(url){
        var image = new Image();
        image.onload = function(e){
            i++;
            images.push(image);
            if(i == imageUrls.length){
                after(images);
            }
        };

        image.src = url;
    });
});

The Canvasflow object:

  • Required options
    • width, height, container, images
  • Optional arguments
    • click: this fires when the currently selected image is clicked/tapped

      click: function(index){ var img = images[index]; //do something }

    • actualWidth, actualHeight: these will resize the canvas without warping any images

    • imgWidth, imgHeight: these will resize the images you provide without warping them

    • tilt: this is the tilt used when rendering offset images, defaults to .2

    • padding: padding between images, defaults to 25

    • scale: determines the scale of the images when not selected, defaults to .75

    • current: index of the initial starting image, defaults to the middle of your images array

    • initialY: determines the starting Y coordinate for drawing images on the stage

  • Methods
    • getCurrentIndex() : returns the currently selected images index
    • select(index) : takes an index and animates the flow to the image associated with that index
    • flow.stage : returns the NinjaJS stage property; this is so you can draw your own shapes in the same canvas
You can’t perform that action at this time.