CanvasDay05 文字渲染

目錄

0x00 文字渲染基礎

0x01 font 字型 字號 和 字體

0x02 文本對齊

案例：在文本中央顯示文字的思路

0x03 文本的度量

---

0x00 文字渲染基礎

ctx.font="bold 40px Arial"

ctx.fillText(string,x,y);

ctx.strokeText(string,x,y) 繪製一行文字，同時這行文字只有外邊框

以上兩個函數都有第四個可選參數，表示文字的總寬度，如果文字總寬度超過該寬度，將會被強行壓縮

案例：

效果：

代碼：

    var canvas = document.getElementById('canvas');
    canvas.height = document.body.clientHeight;
    canvas.width=document.body.clientWidth;
    var ctx = canvas.getContext('2d');
    ctx.font='bold 40px Arial';
    ctx.fillStyle="#058";
    ctx.fillText("Hello DataBank!",40,100);
    
    ctx.lineWidth=3;
    ctx.strokeStyle='#058';
    ctx.strokeText("Hello DataBank",40,200);

    ctx.lineWidth=3;
    ctx.strokeStyle='#058';
    ctx.strokeText("Hello DataBank",40,300,100);
    
    var lg=ctx.createLinearGradient(0,0,800,0);
    lg.addColorStop(0.0,'red');
    lg.addColorStop(0.25,'orange');
    lg.addColorStop(0.5,'yellow');
    lg.addColorStop(0.75,'green');
    lg.addColorStop(1,'purple');
    ctx.fillStyle=lg;
    ctx.fillText('Hello DataBank!',40,500);

    var bg=new Image();
    bg.src='2.jpg';
    bg.onload=function(){
        var pattern=ctx.createPattern(bg,'repeat');
        ctx.fillStyle=pattern;
        ctx.strokeStyle='black';
        ctx.font='bold 100px Arial';
        ctx.fillText("Hello DataBank!",40,650);
        ctx.strokeText("Hello DataBank!",40,650);
    }

0x01 font 字型 字號 和 字體

small-caps 以一種小型大寫字母的形式來顯示所有小寫字母

    var canvas = document.getElementById('canvas');
    canvas.height = document.body.clientHeight;
    canvas.width=document.body.clientWidth;
    var ctx = canvas.getContext('2d');
    ctx.font='bold 40px Arial';
    ctx.fillStyle="#058";
    ctx.fillText("Hello DataBank!",40,100);
    
    ctx.lineWidth=3;
    ctx.strokeStyle='#058';
    ctx.strokeText("Hello DataBank",40,200);

    ctx.lineWidth=3;
    ctx.strokeStyle='#058';
    ctx.strokeText("Hello DataBank",40,300,100);
    
    var lg=ctx.createLinearGradient(0,0,800,0);
    lg.addColorStop(0.0,'red');
    lg.addColorStop(0.25,'orange');
    lg.addColorStop(0.5,'yellow');
    lg.addColorStop(0.75,'green');
    lg.addColorStop(1,'purple');
    ctx.fillStyle=lg;
    ctx.fillText('Hello DataBank!',40,500);

    var bg=new Image();
    bg.src='2.jpg';
    bg.onload=function(){
        var pattern=ctx.createPattern(bg,'repeat');
        ctx.fillStyle=pattern;
        ctx.strokeStyle='black';
        ctx.font='bold 100px Arial';
        ctx.fillText("Hello DataBank!",40,650);
        ctx.strokeText("Hello DataBank!",40,650);
    }

0x02 文本對齊

文本水平對齊：

文本對齊的基準是文本的起始座標值

left 表示起始座標值爲文本的左邊界(默認)

right 表示起始座標值爲文本的右邊界

center 表示起始座標值爲文本的中間

    var canvas = document.getElementById('canvas');
    canvas.height = document.body.clientHeight;
    canvas.width=document.body.clientWidth;
    var ctx = canvas.getContext('2d');
    ctx.font='bold 40px Arial';

    ctx.textAlign='left';
    ctx.fillText('Left',400,100);
    ctx.textAlign='center';
    ctx.fillText('center',400,200);
    ctx.textAlign='right';
    ctx.fillText('right',400,300);

    
    ctx.strokeStyle='#888';
    ctx.moveTo(400,0);
    ctx.lineTo(400,800);
    ctx.stroke();

效果：

文本垂直對齊：

top 表示 起始座標點爲上邊界

bottom 表示 起始座標點爲爲下邊界（默認）

middle 表示起始座標點爲中間

alphabetic 針對於拉丁字母設置的基準線（下邊界）(默認)

ideographic 針對於漢字等方塊字設置的基準線（下邊界）

效果：

代碼：

    var canvas = document.getElementById('canvas');
    canvas.height = document.body.clientHeight;
    canvas.width=document.body.clientWidth;
    var ctx = canvas.getContext('2d');
    ctx.font='bold 40px Arial';

    ctx.textBaseline="top";
    ctx.fillText("Hello DataBank Top",40,100);
    drawBaseline(ctx,40,100);

    ctx.textBaseline="middle";
    ctx.fillText("Hello DataBank Middle",40,200);
    drawBaseline(ctx,40,200);
    
    ctx.textBaseline="bottom";
    ctx.fillText("你好 Hello DataBank Bottom",40,300);
    drawBaseline(ctx,40,300);

    ctx.textBaseline="alphabetic";
    ctx.fillText("你好 Hello DataBank Alphabetic",40,400);
    drawBaseline(ctx,40,400);
    
    ctx.textBaseline="ideographic";
    ctx.fillText("你好 Hello DataBank ideographic",40,500);
    drawBaseline(ctx,40,500);


    
    function drawBaseline(ctx,x,y){
        ctx.moveTo(x,y);
        ctx.lineTo(x+100,y);
        ctx.stroke();
    }

案例：在文本中央顯示文字的思路

效果：

代碼：

    var canvas = document.getElementById('canvas');
    canvas.height = document.body.clientHeight;
    canvas.width=document.body.clientWidth;
    var ctx = canvas.getContext('2d');
    ctx.font='bold 40px Arial';
    ctx.textAlign= 'center';
    ctx.textBaseline = 'middle';

    ctx.fillText("Hello DataBank",canvas.width/2,canvas.height/2);
   
    ctx.moveTo(canvas.width/2,0);
    ctx.lineTo(canvas.width/2,canvas.height);
    ctx.moveTo(0,canvas.height/2)
    ctx.lineTo(canvas.width,canvas.height/2);
    ctx.stroke();

0x03 文本的度量

ctx.measureText(string).width

傳入一個字符串,然後返回一個對象,該對象的width屬性將返回該字符串在canvas中渲染出的字符串的寬度

效果：

代碼：

    var canvas = document.getElementById('canvas');
    canvas.height = document.body.clientHeight;
    canvas.width=document.body.clientWidth;
    var ctx = canvas.getContext('2d');
    ctx.font='bold 40px Arial';
    ctx.fillText("Hello DataBank",40,100);

    var textWidth = ctx.measureText("Hello DataBank").width;
    ctx.fillText("以上字符串的寬度爲"+textWidth+'px',40,200);