canvas fillText()

admin發表於2019-08-25
Canvas

通過此方法可以在畫布上繪製帶有填充的文字。

分解方法的名稱可以有助於理解與記憶，fillText由如下兩個單詞合成：

（1）. fill：翻譯成漢語具有"填充"的意思。

（2）.text：翻譯成漢語具有"文字"的意思。

也就是此方法可以繪製帶有填充的文字，繪製描邊文字參閱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:300px;
  height:150px;
}
</style> 
<script>
window.onload = () => {
  let cvs=document.getElementById("ant");
  let ctx=cvs.getContext("2d");

  ctx.font="30px Verdana";
  ctx.fillText("螞蟻部落",10,90);
}
</script>
</head>
<body>
<canvas id="ant">當前瀏覽器不支援canvas標籤</canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201908/25/094451o11ibaoo1j0omu4i.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.繪製文字"螞蟻部落"。

（2）.預設的填充顏色為黑色。

（3）.文字從(10,90)位置開始繪製。

（4）.通過font屬性設定文字的字型大小和型別。

[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 = () => {
  let cvs=document.getElementById("ant");
  let ctx=cvs.getContext("2d");

  ctx.font="30px Verdana";
  ctx.fillText("螞蟻部落",10,90,80);
}
</script>
</head>
<body>
<canvas id="ant">當前瀏覽器不支援canvas標籤</canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201908/25/094527p3a18f7l8rs1ol7s.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

方法的最後一次引數使用者規定文字的最大寬度。

如果文字寬度超過規定的寬度，那麼文字就會在橫向上被壓縮。

[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 = () => {
  let cvs=document.getElementById("ant");
  let ctx=cvs.getContext("2d");

  ctx.font="30px Verdana";
  ctx.fillText("xyz",10,0);
}
</script>
</head>
<body>
<canvas id="ant">當前瀏覽器不支援canvas標籤</canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201908/25/094600szjk0vzvlgvq4kvg.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

這一點一定要注意，可能不少朋友想當然認為是文字左上角的座標位置。

[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 = () => {
  let cvs=document.getElementById("ant");
  let ctx=cvs.getContext("2d");

  ctx.font="30px Verdana";
  
  let gradient=ctx.createLinearGradient(10,90,cvs.width,0);
  gradient.addColorStop("0","green");
  gradient.addColorStop("0.5","blue");
  gradient.addColorStop("1.0","red");

  ctx.fillStyle=gradient;
  ctx.fillText("螞蟻部落",10,90);
}
</script>
</head>
<body>
<canvas id="ant">當前瀏覽器不支援canvas標籤</canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201908/25/094630lhhgnk0gzw7kwbqw.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼通過漸變填充文字，當然也可以用其他內容填充，比如顏色和圖案。

關於填充的更多內容本文不再介紹，具體可以參閱canvas fillStyle一章節。

相關文章