html5 canvas文本处理 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5 canvas文本处理</title>
<script src="js/modernizr.js"></script>
</head>

<body>
<script type="text/javascript">
window.addEventListener('load',eventWindowLoaded,false);
function eventWindowLoaded(){
    canvasApp();
}
function canvasSupport(){
    return Modernizr.canvas;
}
function canvasApp(){
    if(!canvasSupport()){
        return;
    }else{
        var theCanvas = document.getElementById('canvas')
        var context = theCanvas.getContext("2d")

    }
    var message="your text"
    function drawScreen(){
        context.font = '50px serif';
        context.fillStyle = '#ff0000';
        context.fillText(message,100,80);
     }
     var formElement = document.getElementById("textbox")
     //绑定textbox输入框
     formElement.addEventListener('keyup',textBoxChanged,false);

     //然后通过addEventListener()方法设置keyup事件，然后处理textBoxChanged函数
     
     function textBoxChanged(e){
         var target = e.target;
         message=target.value;
         drawScreen();
    }    
}


</script>
<canvas id="canvas" width="500" height="500">
你的浏览器无法使用canvas
小白童鞋；你的支持是我最大的快乐！！
</canvas>
<form>
Text:<input id="textbox" placeholder="your text" /><br />
</form>
</body>
</html>

posted @ 2015-04-25 21:34  一点点白  阅读(699)  评论(0)  编辑  收藏  举报