Write html5 using the syntax similar to ActionScript-Article 6 TextField and input box
Write html5 with the syntax of the imitation of the ActionScript-article 1,
Write html5 using the syntax similar to ActionScript -- Article 2: Use Sprite to implement animation
Compiling html5 using the syntax similar to ActionScript -- Article 3: mouse events and movement of game characters
Write html5 with the syntax of the imitation of ActionScript-Article 4: inheritance and simple rpg
Write html5 with the syntax of the imitation of ActionScript -- Article 5: Graphics plotting
I. Comparison
1. html5
First, let's look at the text display in the html5 canvas.
Var canvas = document. getElementById ("myCanvas ");
Var context = canvas. getContext ("2d ");
Context. font = "40pt Calibri ";
Context. fillStyle = "# 0000ff ";
Context. fillText ("text test! ", 50,150 );
The input box in html does not need to be added. The input tag is required.
<Input type = "text" id = "myTextbox"/>
2. In the
// Text display
Var txt: TextField = new TextField ();
Txt. text = "text test! ";
Txt. x = 50;
Txt. y = 50;
AddChild (txt );
// Input box
Var txt: TextField = new TextField ();
Txt. type = TextFieldType. INPUT;
Txt. x = 50;
Txt. y = 50;
AddChild (txt );
2. Compile the code after the js class library
// Text display
Var txt = new LTextField ();
. Txt. x = 100;
Txt. text = "TextField test ";
AddChild (txt );
// Input box
Var txt1 = new LTextField ();
Txt1.x = 100;
Txt1.y = 50;
Txt1.setType (LTextFieldType. INPUT );
AddChild (txt1 );
3. Implementation Method
Text display is very simple. You only need to create an LTextField class and a show method to function LTextField (){
Var self = this;
Self. objectindex = ++ LGlobal. objectIndex;
Self. type = "LTextField ";
Self. texttype = null;
Self. x = 0;
Self. y = 0;
Self. text = "";
Self. font = "UTF-8 ";
Self. size = "11 ";
Self. color = "#000000 ";
Self. textAlign = "left ";
Self. textBaseline = "middle ";
Self. lineWidth = 1;
Self. stroke = false;
Self. visible = true;
}
LTextField. prototype = {
Show: function (cood ){
If (cood = null) cood = {x: 0, y: 0 };
Var self = this;
If (! Self. visible) return;
LGlobal. canvas. font = self. size + "pt" + self. font;
LGlobal. canvas. textAlign = self. textAlign;
LGlobal. canvas. textBaseline = self. textBaseline;
LGlobal. canvas. lineWidth = self. lineWidth;
If (self. stroke ){
LGlobal. canvas. strokeStyle = self. color;
LGlobal. canvas. strokeText (self. text, parseFloat (cood. x) + parseFloat (self. x ),
ParseFloat (cood. y) + parseFloat (self. y) + parseFloat (self. size ));
} Else {
LGlobal. canvas. fillStyle = self. color;
LGlobal. canvas. fillText (self. text, parseFloat (cood. x) + parseFloat (self. x ),
ParseFloat (cood. y) + parseFloat (self. y) + parseFloat (self. size ));
}
}
}
The code is not hard to understand, that is, when you call the show method, you just need to draw it on the canvas,
The key is the input box. In html, the input box is a label. How can I draw this label on the canvas? Or can canvas be directly input into a real box?
I am not quite sure about this. If you know it, I hope you can tell me,
Let me talk about my practice now. When textField is input, I first draw a rectangular box and then use div to display the textbox directly in the corresponding position.
At first, only the following code is available in my html.
<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> test-TextField simulation </title>
<Script type = "text/javascript" src = ".../legend. js"> </script>
<Script type = "text/javascript" src = "./js/Main. js"> </script>
</Head>
<Body>
<Div id = "mylegend"> reading the page ...... </Div>
</Body>
</Html>
Then, use javascript to write a canvas and a textbox for preparation.
LGlobal. object = document. getElementById (id );
LGlobal. object. innerHTML = '<div id = "' + LGlobal. id + '_ inittxt "style =" position: absolute; margin: 0px 0px 0px 0px; width:' + width + 'px; height: '+ height + 'px; "> reading data ...... </Div> '+
'<Div style = "position: absolute; margin: 0px 0px 0px 0px; z-index: 0;"> <canvas id = "' + LGlobal. id + '_ canvas "> your browser does not support HTML5 </canvas> </div>' +
'<Div id = "' + LGlobal. id + '_ InputText "style =" position: absolute; margin: 0px 0px 0px 0px; z-index: 10; display: none; "> <input type =" text "id =" '+ LGlobal. id + '_ InputTextBox "/> </div> ';
LGlobal. canvasObj = document. getElementById (LGlobal. id + "_ canvas ");
LGlobal. inputBox = document. getElementById (LGlobal. id + '_ inputtext ');
LGlobal. inputTextBox = document. getElementById (LGlobal. id + '_ InputTextBox ');
LGlobal. inputTextField = null;
First, hide textbox. Then, when you click the rectangle box that I have drawn, show it to the rectangle box, and then click somewhere else, assign input content to textField and hide textbox
The specific practice is not to mention. The following is the complete LTextField code, or you can right-click to view the complete code function LTextField (){
Var self = this;
Self. objectindex = ++ LGlobal. objectIndex;
Self. type = "LTextField ";
Self. texttype = null;
Self. x = 0;
Self. y = 0;
Self. text = "";
Self. font = "UTF-8 ";
Self. size = "11 ";
Self. color = "#000000 ";
Self. textAlign = "left ";
Self. textBaseline = "middle ";
Self. lineWidth = 1;
Self. stroke = false;
Self. visible = true;
}
LTextField. prototype = {
Show: function (cood ){
If (cood = null) cood = {x: 0, y: 0 };
Var self = this;
If (! Self. visible) return;
If (self. texttype = LTextFieldType. INPUT ){
Self. inputBackLayer. show ({x: self. x + cood. x, y: self. y + cood. y });
If (LGlobal. inputBox. name = "input" + self. objectindex ){
LGlobal. inputBox. style. marginTop = (self. y + cood. y) + "px ";
LGlobal. inputBox. style. marginLeft = (self. x + cood. x) + "px ";
}
}
LGlobal. canvas. font = self. size + "pt" + self. font;
LGlobal. canvas. textAlign = self. textAlign;
LGlobal. canvas. textBaseline = self. textBaseline;
LGlobal. canvas. lineWidth = self. lineWidth;
If (self. stroke ){
LGlobal. canvas. strokeStyle = self. color;
LGlobal. canvas. strokeText (self. text, parseFloat (cood. x) + parseFloat (self. x ),
ParseFloat (cood. y) + parseFloat (self. y) + parseFloat (self. size ));
} Else {
LGlobal. canvas. fillStyle = self. color;
LGlobal. canvas. fillText (self. text, parseFloat (cood. x) + parseFloat (self. x ),
ParseFloat (cood. y) + parseFloat (self. y) + parseFloat (self. size ));
}
},
SetType: function (type ){
Var self = this;
If (self. texttype! = Type & type = LTextFieldType. INPUT ){
Self. inputBackLayer = new LSprite ();
Self. inputBackLayer. graphics. drawRect (1, "black", [0, 0,150, 20], true, "# cccccc ");
Self. inputBackLayer. addEventListener (LMouseEvent. MOUSE_DOWN, function (){
If (self. texttype! = LTextFieldType. INPUT) return;
LGlobal. inputBox. style. display = "";
LGlobal. inputBox. name = "input" + self. objectindex;
LGlobal. inputTextField = self;
LGlobal. inputTextBox. value = self. text;
});
} Else {
Self. inputBackLayer = null;
}
Self. texttype = type;
},
MouseEvent: function (event, type, cood ){
If (cood = null) cood = {x: 0, y: 0 };
Var self = this;
If (self. inputBackLayer = null) return;
Self. inputBackLayer. mouseEvent (event, type, {x: self. x + cood. x, y: self. y + cood. y });
}
}
Let's take a look at the results. If there is no effect, download the html5-supported browser.
Http://fsanguo.comoj.com/html5/jstoas05/index.html
Click the input box. the textbox is automatically displayed. Click other places after the input, and the textbox disappears automatically.
From lufy hut
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
