仿 actionscript 语法编写 html5：textfield 与输入框的对比及实现方法

今天咱们来聊聊HTML5里怎么用类似ActionScript的语法玩转TextField和inputbox。这个虽然看上去简单，但其实挺有创意的，还特别实用。HTML5的Canvas上，就这么些小小的改变，就能让它们变得不再单调。

HTML5中的文字显示与输入框

在网页画布上打字，看起来挺轻松的，其实里面可有不少技巧！HTML的input标签朋友们都熟？但要是咱们想让canvas也能做输入框，那可就得另闯新天地。

var canvas = document.getElementById("myCanvas");    
var context = canvas.getContext("2d");    
context.font = "40pt Calibri";    
context.fillStyle = "#0000ff";  
context.fillText("文字测试!", 50, 150);

ActionScript与JavaScript的桥梁

在ActionScript编程里面，常常用到LTextField类和show方法来弄出想要的文本效果。用这两招，你只需要在Canvas上面呼叫show，就能让文字显露出来了。但如果是要说输入框的话，那可就麻烦多了。

输入框的设计挑战

//文字显示  
var txt:TextField = new TextField();  
txt.text = "文字测试!";  
txt.x = 50;  
txt.y = 50;  
addChild(txt);  
//输入框  
var txt:TextField = new TextField();  
txt.type = TextFieldType.INPUT;  
txt.x = 50;  
txt.y = 50;  
addChild(txt);

想要在看图板（Canvas）上面画上那个让人头疼的输入框？我们得换个法子！用那个经典的input标签？不，那可不行。咱们可以试着先画个正方形在Canvas上面，接着用div元素把文本框放在那就得了！

JavaScript的巧妙运用

//文字显示  
var txt = new LTextField();  
txt.x = 100;  
txt.text = "TextField 测试";  
addChild(txt);  
//输入框  
var txt1 = new LTextField();  
txt1.x = 100;  
txt1.y = 50;  
txt1.setType(LTextFieldType.INPUT);  
addChild(txt1);

为达成这个目标，首先要准备一个画布Canvas和一个隐形的textbox。然后通过JavaScript来控制，只要一点到Canvas上的长方形框，就能露出textbox；而不在那个位置去点击的话，就会自动把你输入的文字传给textField，同时还能让textbox隐身起来！

LTextField类的完整实现

这儿来给大家看看咋整一个可以展示文字又能画输入框的LFiledField类。这货儿不就像把HTML5跟ActionScript揉在一起弄出来的吗？

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));  
        }  
    }  
}

交互设计的考量

在画布上做输入框，咱们得同时把功能搞定，还不能忽视用户使用起来是否顺畅。怎样才能让大家在画布上舒服自然地操作？这可是个大问题。所以，我们的设计要求既实用又得让用户觉得好用才行。

技术与艺术的结合

把老式的输入框搬到Canvas上去，这不只是技术难题，更像是创作艺术品。我们这儿搞了个新的互动模式，可能会引发HTML5应用设计的新潮流。

未来的展望

HTML5越来越牛了，咱们在Canvas上做输入框的方法也得跟着升级！大家都知道，新的技术除了好玩以外，最重要的是能给我们带来好用又新奇的体验，好用就体现在如何把它们用好上~

  
  
  
  
  
   
   
  
  
页面读取中……
  
  

结语与互动邀请

咱们今天聊聊HTML5canvas上面的TextField和input框怎么做出来。这个过程虽然有点难，但其实挺有意思的。不知道你有没有试过这种方法？你平时都怎样解决这样的问题？欢迎在下面留言跟大家分享一下你的经验和看法，让我们一起开动脑筋，共同进步！觉得这篇文章对你有帮助的话，记得给我点个赞或者转发给你的朋友们看看让他们也感受一下这种好玩又实用的技术。

LGlobal.object = document.getElementById(id);  
LGlobal.object.innerHTML='
数据读取中……
' +   
'

您的浏览器不支持HTML5
'+  
'

';  
  
  
LGlobal.canvasObj = document.getElementById(LGlobal.id+"_canvas");  
LGlobal.inputBox = document.getElementById(LGlobal.id + '_InputText');  
LGlobal.inputTextBox = document.getElementById(LGlobal.id + '_InputTextBox');  
LGlobal.inputTextField = null;