Home > Developer > Web Develop
An end friend asked me if there is a document, there is indeed, but no Chinese, only in English, first provide a browse address for everyone to refer to learning Createjs English documents.
Easeljs In fact is mainly the Createjs component control Canvas drawing, then will involve closely related drawing operations, drawing operations using the Graphics class implementation, we have to carefully study the graphics class.
First look at the Easeljs (the circular drawing inside):
<!DOCTYPE HTML><HTMLLang= "en -us"><Head> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css">/ * body{margin:0}*/#canvas {border:1px solid #ccc}</style></Head><Body> <CanvasID= "Canvas"width= "$"Height= "$">Your browser does not support canvas labels, please replace the Advanced browser.</Canvas> <Scripttype= "Text/javascript"src= ' Http://cdn.staticfile.org/EaselJS/0.7.1/easeljs.min.js '></Script> <Scripttype= "Text/javascript"src= ' Preloadjs-0.4.1.combined.js '></Script> <Scripttype= "Text/javascript"> Onload=function () {init (); } function init () {var stage=new createjs. Stage (' canvas '); Build the container for the display object var container=new createjs. Container (); var circle=new createjs. Shape (), Squra=new Createjs. Shape (), Arcy=new Createjs. Shape (); Here the drawcircle first two parameters are reference starting coordinates circle.graphics.beginFill (' red '). Drawcircle (0,0,50); circle.x=circle.y=100; Bottom-chained, all drawing methods in the Graphics class will return this Squra.graphics.beginFill (' Blue '). DrawRect (0,0,100,100). End Fill (); Circle.graphics.endFill (); But one thing that does not understand is that the post-painting should cover the first ArcY.graphics.beginFill (' Green '). Arc (200,100,80,60,2*MATH.PI). EndFill (); Container can not use chain operation Container.addchild (Arcy); Container.addchild (circle); Container.addchild (Squra); Stage.addchild (container); Stage.update (); }</Script></Body></HTML>
One thing is clear, the question of coverage is the order in which you add to the canvas, Container.addchild () or Stage.addchild ().
You can clearly see how the graphics class is used when drawing a drawing. The graphics class has two more interesting features, chained operations and shorthand methods. Chained operation. Because all the drawing methods in the graphics class return a graphics instance,
You can use chained operations.
For the graphics class, there is also a shorthand method (official document called "Tiny API"). All shorthand methods are defined as protected methods, which are useful when creating compressed documents.
| mt | lt | ||
| a/at | arc / arcto | BT | Beziercurveto |
| Qt | Quadraticcurveto (also CurveTo) | R | Rect |
| Cp | Closepath | C | Clear |
| f | TD style= "border:1px solid #ffffff; padding:5px 12px; Vertical-align:top; Background-color: #e6e9f5; " >beginfillLF | Beginlineargradientfill | |
| rf | Beginradialgradientfill | BF | Beginbitmapfill |
| ef | EndFill | SS | Setstrokestyle |
| s | TD style= "border:1px solid #ffffff; padding:5px 12px; Vertical-align:top; Background-color: #e6e9f5; " >beginstrokels | Beginlineargradientstroke | |
| rs | Beginradialgradientstroke | bs | Beginbitmapstroke |
| Es | Endstroke | Dr | DrawRect |
| Rr | Drawroundrect | Rc | Drawroundrectcomplex |
| dc | Drawcircle | De | DrawEllipse |
| Dp | Drawpolystar | P | Decodepath |
The use of shorthand method, as shown below, is very convenient (recommended not skilled in the shorthand, not shorthand to deepen the impression is not better).
SQURA.GRAPHICS.F (' Blue '). Dr (0,0,100,100). EF ();
example, using a graphics class object to draw a face:
<!DOCTYPE HTML><HTMLLang= "en -us"><Head> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css">/ * body{margin:0}*/#canvas {border:1px solid #ccc}</style></Head><Body> <CanvasID= "Canvas"width= "$"Height= "$">Your browser does not support canvas labels, please replace the Advanced browser.</Canvas> <Scripttype= "Text/javascript"src= ' Http://cdn.staticfile.org/EaselJS/0.7.1/easeljs.min.js '></Script> <Scripttype= "Text/javascript"> Onload=function () {init (); } function init () {var stage=new createjs. Stage (' canvas '), Container=new Createjs. Container (); Draw the smiley face var cricle=new createjs. Shape (); Cricle.graphics.beginFill ("Orange"). Drawcircle (0,0,100). EndFill (); cricle.x=300; cricle.y=240; Container.addchild (cricle); Draw the left side of the eye var eye=new createjs. Shape (); DrawEllipse (x y w h), X is the ellipse of the left coordinate point and Y is the ellipse of the right coordinate point, W is the broadband of the ellipse, and H is the height of the ellipse eye.graphics.beginFill ("Rgba (0,0,20,.5) "). DrawEllipse (0,0,40,20). EndFill (); Sets the center coordinate of the shape instance eye.x=240; eye.y=180; Container.addchild (eye); Draw eyes, right var eye1=new createjs. Shape (); Eye1.graphics.beginFill ("Rgba (0,0,20,.5)"). DrawEllipse (0,0,40,20). EndFill (' orange '); eye1.x=320; eye1.y=180; Container.addchild (EYE1); Draw the nose var nose=new createjs. Shape (); Nose.graphics.beginFill ("Rgba (0,0,20,.5)"). Drawcircle (0,0,10). EndFill (); nose.x=300; nose.y=250; Container.addchild (nose); Draw the mouth var mouth=new createjs. Shape (); Setstrokestyle (thickness [caps=0] [joints=0] [miterlimit=10] [Ignorescale=false])//thickness stroke width, caps crossover style 0 is flat, 1 is round Head, 2 is square head mouth. Graphics.setstrokestyle (8, "Round"). Beginstroke ("Mouth"). Arc (0,0,100,math.pi*60/180,math.pi*120/180). EndFill (); mouth.x=300; mouth.y=200; Container.addchild (mouth); Stage.addchild (container); Stage.update (); }</Script></Body></HTML>
Finally, the relationship between Circle.drawcircle (X,y,radius) and circle.x,circle.y (which may sometimes be easily confused):
Circle.drawcircle (X,y,radius), circle.x,circle.y//usually we can directly example Circle.drawcircle (0,0,100), which represents the circle with the center coordinates (0,0), with a radius of 100. /However we set circle.drawcircle (0,0,100), circle.x=100,circle.y=100 is the Circle Center (100,100), with a radius of 100 to draw round, circle.x and Circle.y, In fact, it is relative to the initial center position x, y offset,//To do an example to understand, such as circle.drawcircle (10,10,100), circle.x=100,circle.y=100, is the Center (110,110), Draw a circle Cricle.graphics.beginFill ("Orange") with a radius of 100. Drawcircle (0,0,100). EndFill (); cricle.x=300;cricle.y=240;HTML5 Game Frame Createjs component--easeljs (ii) Drawing class graphics
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
