canvas繪製文本

時間 2019-11-16

標籤 canvas 繪製文本简体版

原文原文鏈接

##在canvas中繪製文本
canvas 提供了兩種方法來渲染文本:
fillText(text, x, y)
在指定的(x,y)位置填充指定的文本
strokeText(text, x, y)
在指定的(x,y)位置繪製文本邊框javascript

                ctx.fillText("填充指定的文本",10,100);
                ctx.strokeText("繪製文本邊框",10,150);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
                overflow: hidden;
            }
            body{
                background: pink;
            }
            #test{
                background: gray;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <canvas id="test" width="300" height="300">
            <span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
        </canvas>
    </body>
    <script type="text/javascript">
        window.onload=function(){
            var canvas = document.querySelector("#test");
            if(canvas.getContext){
                var ctx = canvas.getContext("2d");
                ctx.fillStyle="green"
                ctx.font="40px sans-serif"
//                在指定的(x,y)位置填充指定的文本
                ctx.fillText("填充指定的文本",10,100);
                ctx.strokeText("繪製文本邊框",10,150);
            }
        }
        
        
    </script>
</html>

fillText-strokeText

###文本樣式
font = value
當前咱們用來繪製文本的樣式. 這個字符串使用和 CSS font 屬性相同的語法.
默認的字體是 10px sans-serif。
font屬性在指定時，必需要有大小和字體缺一不可css

ctx.font="40px sans-serif";

textAlign = value
文本對齊選項. 可選的值包括： left, right center. html

ctx.textAlign="right";

left
文本左對齊。
right
文本右對齊。
center
文本居中對齊。
這裏的textAlign="center"比較特殊。textAlign的值爲center時候
文本的居中是基於你在fillText的時候所給的x的值，
也就是說文本一半在x的左邊，一半在x的右邊java

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
                overflow: hidden;
            }
            body{
                background: pink;
            }
            #test{
                background: gray;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <canvas id="test" width="300" height="300">
            <span>您的瀏覽器不支持畫布元素 請您換成萌萌的谷歌</span>
        </canvas>
    </body>
    <script type="text/javascript">
        window.onload=function(){
            var canvas = document.querySelector("#test");
            if(canvas.getContext){
                var ctx = canvas.getContext("2d");
                ctx.fillStyle="green";
                ctx.font="40px sans-serif";
                ctx.textAlign="right";
                ctx.fillText("大小和字體 缺一不可",300,50);
            }
        }
        
        
    </script>
</html>

View Code

textBaseline = value
描述繪製文本時，當前文本基線的屬性。
top
文本基線在文本塊的頂部。
middle
文本基線在文本塊的中間。
bottom
文本基線在文本塊的底部。canvas

ctx.textBaseline="middle";

###measureText
measureText() 方法返回一個 TextMetrics 對象，包含關於文本尺寸的信息（例如文本的寬度）

###canvas中文本水平垂直居中瀏覽器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            body{ background:black;}
            #c1{ background:white;}
        </style>
    </head>
    <body>
        <canvas id="c1" width="400" height="400"></canvas>
    </body>
    <script type="text/javascript">
        window.onload = function(){
            var oC =document.getElementById('c1');
            var oGC = oC.getContext('2d');
            oGC.font = '60px impact';
            oGC.textBaseline = 'middle';  //middle bottom
            var w = oGC.measureText('水平').width;
            oGC.fillText('水平居中',(oC.width - w)/2 , (oC.height - 60)/2);
        };
    </script>
</html>

View Code

###陰影(文本陰影&盒模型陰影)
shadowOffsetX = float
shadowOffsetX 和 shadowOffsetY 用來設定陰影在 X 和 Y 軸的延伸距離，
它們默認都爲 0。
shadowOffsetY = float
shadowOffsetX 和 shadowOffsetY 用來設定陰影在 X 和 Y 軸的延伸距離，
它們默認都爲 0。
shadowBlur = float
shadowBlur 用於設定陰影的模糊程度，其數值並不跟像素數量掛鉤，也不受變換矩陣的影響，默認爲 0。
shadowColor = color(必需項)
shadowColor 是標準的 CSS 顏色值，用於設定陰影顏色效果，默認是全透明的黑色。ide

            oGC.shadowOffsetX = 20;
            oGC.shadowOffsetY = 20;
            oGC.shadowBlur = 30;
            oGC.shadowColor = "yellow";
            
            
            oGC.fillRect(0,0,100,100);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            body{ background:black;}
            #c1{ background:white;}
        </style>
    </head>
    <body>
        <canvas id="c1" width="400" height="400"></canvas>
    </body>
    <script type="text/javascript">
        window.onload = function(){
            var oC =document.getElementById('c1');
            var oGC = oC.getContext('2d');
            
            //文本陰影&盒陰影
            oGC.shadowOffsetX = 20;
            oGC.shadowOffsetY = 20;
            oGC.shadowBlur = 30;
            oGC.shadowColor = "yellow";
            
            
            oGC.fillRect(0,0,100,100);
        };
    </script>
</html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。