phillehmann / primer Goto Github PK
View Code? Open in Web Editor NEWThis project forked from mojombo/primer
Primer is a Flash-like API built on top of Canvas using jQuery.
License: MIT License
This project forked from mojombo/primer
Primer is a Flash-like API built on top of Canvas using jQuery.
License: MIT License
##### ##### ### ## ## ##### ##### # # # # # ## ## # # # # # # # # # ## ## # # # #### #### # # # # # ### #### # # # # # # # # # # # # # # # # # # # # # # ### ### ## ### ### # ### ##### ### ## Primer. By Tom Preston-Werner. Primer is a Flash-like API layered on top of Canvas. INSTALL ---------------------------------------------------------------------------- Just include jQuery and Primer libraries on your page. <script src="jquery-1.2.6.min.js" type="text/javascript"></script> <script src="primer.js" type="text/javascript"></script> BASIC DRAWING EXAMPLE ----------------------------------------------------------------------------- In your html create an empty div with an id you can reference later: <div id="primer"></div> In your JavaScript, create a new Primer object for the div, specifying width and height. $(function() { var primer = new Primer("#primer", 100, 100) ... }) Now that you have a Primer instance, you can start adding layers to it. Start by creating an instance of Primer.Layer: var square = new Primer.Layer() Now you can draw on the layer. Let's draw a 20x20 pixel gray square. square.fillStyle = "#888888" square.fillRect(0, 0, 20, 20) The square won't be drawn until it is added to the Primer instance. primer.addChild(square) BASIC ANIMATION EXAMPLE ----------------------------------------------------------------------------- If you follow the instructions in [Basic Drawing Example], you'll have an object called `square` that has been drawn to the screen. Moving the square to another place is as easy as setting its `x` and `y` values. square.x = 10 square.y = 10 The square has now moved to its new location. Contrary to raw Canvas work, Primer layers redraw themselves any time they're moved. If we'd like the square to move slowly across the screen, we can simply increase the `x` value on an interval. function go() { square.x += 1 } setInterval(go, 100) BASIC EVENTS EXAMPLE ----------------------------------------------------------------------------- In Primer it's easy to attach event listeners to your Layers. Let's say we want to log "in" and "out" when you mouse over and mouse out of your gray square. square.mouseover(function() { console.log("in") }) square.mouseout(function() { console.log("out") }) BASIC TEXT EXAMPLE ----------------------------------------------------------------------------- Primer implements a basic version of Canvas' text api with standard DOM elements since no major browser release yet offers this. Let's draw the text "Hello, World!" in 12px Monaco in red at (0, 0) with a max width of 100px: var text = Primer.Layer() text.font = "12px Monaco" text.fillStyle = "#FF0000" text.textAlign = "center" text.fillText("Hello, World!", 0, 0, 100) The signature of fillText() is (text, x, y, width). The font attribute takes standard CSS font values. The text API currently does not support any transformations except translation.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.