HTML5- Canvas入門（四） - vajoy－IT工程師數位筆記本

文章出處

前幾章我們學習了矩形、多邊形、圓形、曲線等圖形的繪制，今天來學習下更簡單一些的文本繪制及其各種功能方法。

在canvas中我們可以通過 strokeText() 和 fillText() 來繪制描邊文本或者實心文本：

<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC;">
您的瀏覽器不支持canvas，建議使用最新版的Chrome
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,c.width,c.height);
gradient.addColorStop("0","green");
gradient.addColorStop("1","rgba(200,255,10,0.5)");
ctx.fillStyle=gradient;
ctx.strokeStyle= "red";
ctx.fillText("fillText",50,10);
ctx.strokeText("strokeText",50,70);
</script>

strokeText() 和 fillText() 內均有3個參數，第一個字符串參數表示要顯示的文本內容，后面2個參數表示文本繪制的起始點坐標(x,y)。

該段代碼效果如下：

上方雖然繪制出相應的文本，但由于沒有設置font-size導致太小不好看，我們可以通過 font() 方法來做設置，要知道它的參數跟css中font屬性的參數是一致的，我們可以一口氣設置上文本的大小、字體、粗細等：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,c.width,c.height);
gradient.addColorStop("0","green");
gradient.addColorStop("1","rgba(200,255,10,0.5)");
ctx.fillStyle=gradient;
ctx.strokeStyle= "red";
ctx.font="italic 30px Arial bold";//定義字體樣式
ctx.fillText("fillText",50,10);
ctx.strokeText("strokeText",50,70);

效果如下：

顯然上面繪制出來的文本還是有問題，即fillText的上半身居然跑到畫布外去了，話說我們不是從坐標(50,10)的位置開始繪制的文本么，怎么向上偏移了那么多？

這是因為canvas繪制出來的文本在垂直方向上并不是默認頂部對齊的，我們畫一條參考線來參詳其對齊方式：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(10,60);
ctx.lineTo(290,60);
ctx.stroke();
var thetext = "Here`s some words..."
ctx.fillStyle="red";
ctx.font="italic 30px Arial bold";
ctx.fillText(thetext,80,60);

可見canvas默認文本在垂直方向是底部對齊的。若要對此特性進行修改，可通過定義 textBaseline 來改變文本在垂直方向的基線位置：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(10,60);
ctx.lineTo(290,60);
ctx.stroke();
var thetext = "Here`s some words..."
ctx.fillStyle="red";
ctx.font="italic 30px Arial bold";
ctx.textBaseline="top"; //設置文本的基線為頂部
ctx.fillText(thetext,80,60);

注意這里我們是定義textBaseline的值為“top”，即要求文本基線位于文本最頂部，除了"top"還有更多可選值，它們所對應的效果如下：

來段測試代碼：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(10,60);
ctx.lineTo(290,60);
ctx.stroke();
ctx.fillStyle="red";
ctx.font="italic 14px Arial";
ctx.textBaseline="alphabetic";
ctx.fillText("alphabetic",10,60);
ctx.textBaseline="top"; 
ctx.fillText("top",80,60);
ctx.textBaseline="bottom";
ctx.fillText("bottom",100,60);
ctx.textBaseline="middle";
ctx.fillText("middle",150,60);
ctx.textBaseline="hanging";
ctx.fillText("hanging",210,60);

既然可以設置文本在垂直方位的顯示方式，自然也可以設置文本在水平方向的對齊方式了，我們可以通過定義 textAlign 的值來實現需求。

textAlign的可選值如下：

測試代碼：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(150,10);
ctx.lineTo(150,190);
ctx.stroke();
ctx.fillStyle="red";
ctx.font="italic 14px Arial";
ctx.textAlign="start";
ctx.fillText("start",150,40);
ctx.textAlign="end"; 
ctx.fillText("end",150,60);
ctx.textAlign="left";
ctx.fillText("left",150,90);
ctx.textAlign="center";
ctx.fillText("center",150,130);
ctx.textAlign="right";
ctx.fillText("right",150,180);

我們重新來看看上文曾繪制的一個文本效果：

由于文本font-size設置的太大，導致文本超出了畫布右側區域，這段文本還不如不要寫上去不是么？我們可以通過 measureText().width 方法來獲取文本的寬度，進而判斷是文本最終否會超出畫布，如果會則取消繪制文本：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.fillStyle="red";
ctx.font="italic 30px Arial bold";
//ctx.font="italic 10px Arial bold";
var thetext = "Here`s some words...";
var text_width = ctx.measureText(thetext).width; //獲得文本寬度
var x = 50; 
if( x + text_width <= c.width ){  //如果文本不會超出畫布則繪制文本
    ctx.fillText(thetext,x,60);
}

我們要知道的是，其實 measureText() 對象就只有這么一個.width屬性，由于文本在canvas中的不存在行高的，故無法獲知文本的高度，也理所當然沒有.height屬性了。

最后說說如何給文本添加投影。其實在canvas中給對象添加投影所用到的方法是一致的，并不僅限于文本。

我們可以通過給 shadowColor 和 shadowBlur 賦值來給畫布對象添加投影，前者是設置顏色（沒有定義shadowColor的話默認為黑色），后者是設置要模糊的階數（沒有定義shadowBlur的話默認模糊階數為0，也就是不對投影邊緣做任何模糊）。

當然作為樣式方法，它們依舊得在畫布對象繪制之前定義才能生效：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.fillStyle="red";
ctx.font="italic 20px Arial bold";
var thetext = "Here`s some words...";
ctx.shadowColor = "blue";  //定義投影顏色為藍色
ctx.shadowBlur = 15;   //定義投影模糊階數為15像素
ctx.fillText(thetext,10,60);

另外投影還可以通過 shadowOffsetX 和 shadowOffsetY 來設置投影在橫坐標或縱坐標方向上的偏移：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.fillStyle="red";
ctx.shadowColor = "blue";  
ctx.shadowBlur = 10;  
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = -40;
ctx.fillRect(60,60,100,100);