https://github.com/deebloo/canvasmobile
HTML5 canvas components for mobile web apps
https://github.com/deebloo/canvasmobile
Last synced: over 1 year ago
JSON representation
HTML5 canvas components for mobile web apps
- Host: GitHub
- URL: https://github.com/deebloo/canvasmobile
- Owner: deebloo
- Created: 2014-05-07T20:09:27.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2014-05-12T15:15:28.000Z (about 12 years ago)
- Last Synced: 2025-02-12T07:53:40.316Z (over 1 year ago)
- Language: JavaScript
- Size: 184 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Mobile Drawer Canvas
============
This is an experiment with the html5 canvas and Kinetic JS.
HTML5 canvas components for mobile web apps using Kinetic JS.
Creates high performance GUI objects without needing you to touch the canvas yourself.
To initiate a drawer(this will create a canvas width a drawer drawn off screen):
You can the slide the drawer out by calling slideOut().
```JS
//create stage to hold your drawer
var stage = new Kinetic.Stage({
container: 'container',
width: window.screen.availWidth,
height: window.screen.availHeight
});
//create the drawer object
var myDrawer = new Drawer({
height: 50,
width: 275,
stage: stage,
data: dummyData //feed data an array of objects. Ex: {title: "home", link: "http://www.google.com"}
});
//draw the drawer to the screen
myDrawer.create();
//slide the drawer out on click
var slideButtonOut = document.getElementById("slide-out");
slideButtonOut.addEventListener("click", function() {
myDrawer.slideOut({ duration: 0.85, easing: "BounceEaseOut" });
});
```