當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

html5 canvas在线文本第二步设置（字体边框）等我全部写完，我会写在页面底部

發布時間：2023/12/13 综合教程 35 生活家

生活随笔收集整理的這篇文章主要介紹了 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>

總結

以上是生活随笔為你收集整理的html5 canvas在线文本第二步设置（字体边框）等我全部写完，我会写在页面底部的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Linux加密框架 crypto 算法模
下一篇： if __name__ == __mai