canvas fillText() 填充文字

admin發表於2018-11-03

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;}

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

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

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

相關文章