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 eventWindowLoader(){
    canvasApp();
}
function canvasApp(){
    var message="JourneyYao";
    var fillOrStroke ="fill";
    
    if(!canvasSupport()){
        return;
    }
    
    var theCanvas = document.getElementById('canvas')
    var context = theCanvas.getContext("2d")

    var formElement = document.getElementById("textbox")
    formElement.addEventListener('keyup',textBoxChanged,false);
     
    var formElement = document.getElementById("fillorstroke")
    formElement.addEventListener('change',fillOrStrokeChanged,false);
     
    
    drawScreen()
    function drawScreen(){
        context.fillStyle = '#ffffaa';
        context.fillRect(0,0,theCanvas.width,theCanvas.height);
        
        context.strokeStyle = '#000';
        context.strokeRect(5,5,theCanvas.width-10,theCanvas.height-10);
        
        
     
        //字体大小
        context.font="50px serif";

        var metrics = context.measureText(message);
        //字体居中
        var textWidth= metrics.width;
        var xPosition=(theCanvas.width/2)-(textWidth/2);
        var yPosition=(theCanvas.height/2);
        
        //选择类型
        switch(fillOrStroke){
            case "fill":
                context.fillStyle="#ff0000";
                context.fillText(message,xPosition,yPosition);
                break;
            case "stroke":
                context.strokeStyle="#000000";
                context.strokeText(message,xPosition,yPosition);
                break;
            case "both":
                context.fillStyle="#ff0000";
                context.fillText(message,xPosition,yPosition);
                context.strokeStyle="#000000";
                context.strokeText(message,xPosition,yPosition);
                break;
        
        
        }
        
    }    
    function textBoxChanged(e){
         var target = e.target;
         message=target.value;
         drawScreen();
    }    
    function fillOrStrokeChanged(e){
         var target = e.target;
         fillOrStroke=target.value;
         drawScreen();
    }    
}


</script>
<canvas id="canvas" width="500" height="300">
你的浏览器无法使用canvas
小白童鞋；你的支持是我最大的快乐！！
</canvas>
<form>
Text:<input id="textbox" placeholder="your text" /><br />
Fill Or Stroke:
<select id="fillorstroke">
  <option value="fill">fill</option>
  <option value="stroke">stroke</option>
  <option value="both">both</option>


</select>
</form>


</body>
</html>

相关阅读:
多线程
 JavaSE
SpringBoot是什么，可以做什么？
SSM框架中如何简便上传文件表单
 SQL语句全解，非常棒！
关于HttpSession 和 Hibernate框架中 session异同点的简单解析
 关于Javascript中页面动态钟表的简单实现
 Java 面向对象知识点基础浅谈
 Eclipse无法正常启动，弹出对话框内容为 A Java Runtime...
关于Java中面向对象章节、IO 流中的重点基础知识。
原文地址：https://www.cnblogs.com/LoveOrHate/p/4456863.html