Writing html5--fifth, graphics drawing with the syntax of ActionScript

Writing html5--fifth, graphics drawing with the syntax of ActionScript

Canvas itself is a graphics that can be plotted directly
In ActionScript, every sprite has a graphics,shape I don't think about it, it's easier to implement,
In HTML5, the drawing is painted on the same canvas, so we now need to consider two issues,
1, how to put the graphics in each sprite at different times, painting in the same place
2, because we are constantly refreshing the page, so if we draw with the graphics, then it also needs to be constantly refreshed

Now I'm still assuming that each sprite is stored in a graphics that saves only a few of the drawing commands, and these drawing commands are all painted on canvas when they are plotted.
So, on the assumption, I need an array or class that holds these drawing commands.
I'm building a lgraphics class, which should contain drawing instructions, and Show methods

functionLgraphics () {varSelf = This; Self.type= "Lgraphics"; Self.color= "#000000"; SELF.I= 0; Self.alpha= 1; Self.setlist=NewArray (); Self.showlist=NewArray ();} Lgraphics.prototype={show:function (){        varSelf = This; if(Self.setList.length = = 0)return; //Drawing    }}

When I was drawing, I added all the drawing instructions to setlist, and then called the Show method to draw
There is also a showlist, which is used to save the area of the drawing, and the function will be known
Here's how to solve the problem of how the instructions are stored
Adding methods to Lgraphics

DrawLine:function(Thickness,linecolor,pointarray) {varSelf = This; Self.setList.push (function() {LGlobal.canvas.beginPath (); LGlobal.canvas.moveTo (pointarray[0],pointarray[1]); LGlobal.canvas.lineTo (pointarray[2],pointarray[3]); LGlobal.canvas.lineWidth=thickness; LGlobal.canvas.strokeStyle=LineColor;            LGlobal.canvas.closePath ();        LGlobal.canvas.stroke ();    }); }, DrawRect:function(thickness,linecolor,pointarray,isfill,color) {varSelf = This; Self.setList.push (function() {LGlobal.canvas.beginPath (); LGlobal.canvas.rect (pointarray[0],pointarray[1],pointarray[2],pointarray[3]); if(Isfill) {LGlobal.canvas.fillStyle=color;            LGlobal.canvas.fill (); } LGlobal.canvas.lineWidth=thickness; LGlobal.canvas.strokeStyle=LineColor;        LGlobal.canvas.stroke ();        }); Self.showList.push ({type:"Rect", Value:pointarray}); }, DrawArc:function(thickness,linecolor,pointarray,isfill,color) {varSelf = This; Self.setList.push (function() {LGlobal.canvas.beginPath (); LGlobal.canvas.arc (pointarray[0],pointarray[1],pointarray[2],pointarray[3],pointarray[4],pointarray[5]); if(Isfill) {LGlobal.canvas.fillStyle=color;            LGlobal.canvas.fill (); } LGlobal.canvas.lineWidth=thickness; LGlobal.canvas.strokeStyle=LineColor;        LGlobal.canvas.stroke ();        }); Self.showList.push ({type:"Arc", Value:pointarray}); }

Three methods are to draw a line, a rectangle, a circle
Because the instructions I've stored are function.
So, when I draw, I can call the method directly
So, make a slight change to the Show method

    Show:function  () {        varthis;         if (Self.setList.length = = 0) return ;         var key;          for inch self.setlist) {            Self.setlist[key] ();        }    }

So the drawing class is finished, the complete class for a moment please look at the source code


Next, add self.graphics = new Lgraphics () to the Lsprite constructor, and you're ready to draw.
The code is as follows

New lsprite ();    AddChild (Backlayer);     // Draw a circle    BackLayer.graphics.drawRect (1, "Black", [a], ",", "true", "#cccccc");     // Draw a rectangle        BACKLAYER.GRAPHICS.DRAWARC (2, "black", [+, +, +, 0,2*math.pi,false],true, "#FF0000") ;     // draw a line    BackLayer.graphics.drawLine (2, "#FF0000", [200, 20, 100, 50]);

In fact, the shortcomings of things, because the mouse click Lsprite judgment, I only judge the Lsprite save bitmap, etc., if the lsprite inside the picture, click on the time, should also respond to mouse events, so need to determine whether the location of the click in the drawing area
In fact, also simple, to lgraphics add a Ismouseon method, to determine whether to be clicked on it

Ismouseon:function(event,cood) {varSelf = This; varkey;  for(Keyinchself.showlist) {            if(Self.showlist[key].type = = "Rect"){                if(Event.offsetx >= self.showlist[key].value[0] + cood.x && event.offsetx <= self.showlist[key].value[0] + Cood.x + self.showlist[key].value[2] &&event.offsety>= self.showlist[key].value[1] + cood.y && event.offsety <= self.showlist[key].value[1] + cood.y + Self.sho Wlist[key].value[3]){                    return true; }            }Else if(Self.showlist[key].type = = "Arc"){                varXL = self.showlist[key].value[0] + cood.x-Event.offsetx; varYL = self.showlist[key].value[1] + cood.y-event.offsety; returnXl*xl+yl*yl <= self.showlist[key].value[2]*self.showlist[key].value[2]; }        }                return false; }

The size of the plot is preserved in the showlist and now comes in handy.

Init ("Mylegend", 800,480, main);varBacklayer;functionMain () {legendloadover (); Backlayer=NewLsprite ();        AddChild (Backlayer); //Draw a circleBackLayer.graphics.drawRect (1, "Black", [20, 20, 150, 20],true, "#cccccc"); //Draw a rectangleBACKLAYER.GRAPHICS.DRAWARC (2, "black", [+, +, 0,2*math.pi,false],true, "#FF0000"); //Draw a lineBackLayer.graphics.drawLine (2, "#FF0000", [200, 20, 100, 50]); //mouse click to JudgeBacklayer.addeventlistener (Lmouseevent.mouse_down, onmousedown);}functiononmousedown (Event) {alert ("Isclick");}

Look at the results, you can't see the effect. Download the browser that supports HTML5
Http://fsanguo.comoj.com/html5/jstoas04/index.html
Click on the rectangle and circle above to see if the mouse event is accurate

Writing html5--fifth, graphics drawing with the syntax of ActionScript