canvas strokeText() 文字描邊

admin發表於2018-11-03
Canvas

此方法可以在指定位置繪製具有描邊的文字。

stroke是描邊的意思，text則是文字的意思，方法功能的確名副其實。

可以結合canvas fillText()一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
context.strokeText(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;
}
</style> 
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");

  ctx.font="40px Georgia";
  ctx.strokeText("螞蟻部落",10,50);
}
</script>
</head>
<body>
<canvas id="ant" width="380" height="150"></canvas>
</body>
</html>

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

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

程式碼分析如下：

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

（2）.文字繪製的位置有strokeText方法的第二個和第三個引數規定。

可以看到文字是鏤空的，也就是隻有描邊沒有填充，當然我們也可以對其進行填充。

具體實現方式可以參閱canvas 填充描邊文字一章節。

預設狀態下，描邊的顏色是#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;
}
</style> 
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");

  ctx.font="40px Georgia";
  ctx.strokeStyle="red";
  ctx.lineWidth="2"
  ctx.strokeText("螞蟻部落",10,50);
}
</script>
</head>
<body>
<canvas id="ant" width="380" height="150"></canvas>
</body>
</html>

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

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

上述程式碼對文字的描邊進行了修飾操作。

（1）.通過lineWidth屬性設定描邊的粗細。

（2）.strokeStyle屬性設定描邊的樣式。

關於lineWidth屬性的基本用法可以參閱canvas lineWidth繪製原理一章節。

strokeStyle屬性不僅僅可以設定顏色，屬性值也可以是漸變或者圖案模式。

看一段程式碼例項:

[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;
}
</style> 
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");

  ctx.font="40px 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.strokeStyle=gradient;
  ctx.lineWidth="2"
  ctx.strokeText("螞蟻部落",10,50);
}
</script>
</head>
<body>
<canvas id="ant" width="380" height="150"></canvas>
</body>
</html>

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

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

可以看到文字描邊具有線性漸變效果。

maxWidth引數：

也就是strokeText方法的最後一個引數。

它用來規定文字顯示範圍的，如果沒有此引數，那文字具有廣闊的天地。

如果規定此引數，那麼文字只能在此引數規定的寬度內顯示，如果文字寬度超過maxWidth，那麼文字會進行瘦身操作，也就是在水平方向擠壓或者縮小字號以適應寬度。

程式碼例項如下：

[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;
}
</style> 
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");

  ctx.font="40px 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.strokeStyle=gradient;
  ctx.lineWidth="2"
  ctx.strokeText("螞蟻部落",10,50,60);
}
</script>
</head>
<body>
<canvas id="ant" width="380" height="150"></canvas>
</body>
</html>

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

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

是不是這樣就很容易理解了。

相關文章