canvas fillText() 填充文字

admin發表於2018-11-03
Canvas

fillText方法可以繪製具有填充的文字效果。

當然也可以繪製具有描邊的文字效果，具體參閱canvas strokeText()一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
context.fillText(text,x,y,maxWidth);

引數解析：

（1）.text：必需，要繪製的文字內容。

（2）.x：必需，開始繪製文字的x軸座標。

（3）.y：必需，開始繪製文字的y軸座標。

（4）.maxWidth：可選，規定文字繪製區域的最大寬度，後面會有程式碼詳細演示。

瀏覽器相容:

（1）.IE9+瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.火狐瀏覽器支援此方法。

（5）.Opera瀏覽器支援此方法。

（6）.Safari瀏覽器支援此方法。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:200px;
  height:100px;
}
</style> 
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  ctx.font="30px Georgia";
  ctx.fillText("螞蟻部落",10,50);
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/03/094352ua3k17fp3173c8s1.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面程式碼實現文字繪製功能，分析如下：

（1）.fillText方法第一個引數規定了要繪製的文字是"螞蟻部落"。

（2）.第二個和第三個引數規定文字繪製的起始位置。

（3）.通過font屬性設定文字的字型相關樣式。

（4）.fillText方法的預設填充顏色是#000000。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:200px;
  height:100px;
}
</style> 
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  ctx.font="30px Georgia";
  ctx.fillStyle="blue";
  ctx.fillText("螞蟻部落",10,50);
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/03/094425p2wpwpa2aa8822sg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過fillStyle屬性將文字的填充顏色設定為藍色。

fillStyle屬性值不僅僅是顏色，還可以是漸變物件或者圖案模式。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:300px;
  height:150px;
}
</style> 
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
 
  ctx.font="30px Georgia";
  let gradient=ctx.createLinearGradient(0,0,canvas.width,0);
  gradient.addColorStop("0","magenta");
  gradient.addColorStop("0.5","blue");
  gradient.addColorStop("1.0","red");
  ctx.fillStyle=gradient;
  ctx.fillText("softwhy.com",10,30);
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/03/094454a3mnanvm4htn3rnl.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

將文字的填充設定為漸變物件。

關於fillStyle屬性可以參閱canvas fillStyle一章節。

fillText方法僅僅是實現文字的填充效果，如果要設定字型的相關樣式可以使用如下屬性：

（1）.font屬性可以參閱canvas font 屬性一章節。

（2）.textAlign屬性可以參閱canvas textAlign 屬性一章節。

（3）.textBaseline屬性可以參閱canvas textBaseline 屬性一章節。

（4）.direction屬性可以參閱canvas direction 屬性一章節。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:200px;
  height:100px;
}
</style> 
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  ctx.font="30px Georgia";
  ctx.fillStyle="blue";
  ctx.fillText("螞蟻部落",10,50);
  ctx.fillText("螞蟻部落",10,100,50);
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/03/094605dafc9rx9xrkxol9f.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

方法的第四個引數用來規定文字繪製區域的寬度。

如果寬度超過文字總寬度，那麼一切繪製正常。

如果小於文字的總寬度，那麼字型會水平縮放或者配合使用更小號的字型。

相關文章