Map
The Crafty can easily draw a rectangle (like a Sprite).
Crafty.init (+), var square = crafty.e (' All, Canvas, Color '), square.attr ({x:10, y:10, w:100, h:100}). Color (' r Ed ');
The meaning of this code:
First, the 400*400 stage was created.
We then created an entity with three components "2D, Canvas, Color"
. All the content you want to show requires "2D"
a component and a render layer, which we use "Canvas"
as a render layer. "Color"
component is used to draw colors.
Finally, we use .attr()
the method to set its size position and other properties.
It's easy! We've drawn a red rectangle, and now we're going to make it move, "2D"
there's a property inside the component rotation
, and to make it spin, we can bind the "EnterFrame"
event
Square.bind (' EnterFrame ', function () {this.rotation = this.rotation + 1;});
If you want it to rotate with the center axis, use the following method: (This method inherits from the auto component)
Square.origin ("center")
The complete final code is:
<! Doctype html>
Look at the effect!
You can try to modify the code inside the enterframe, such as add: This.x = x+1
CRAFTYJS Learning four--2D Graphics