canvas 寫入文字內容

admin發表於2019-08-25
Canvas

實際應用中可能需要向圖案中寫入文字內容。

下面將通過程式碼例項演示一下如何實現標題中的效果。

程式碼例項如下：

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

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

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

上述程式碼在圖案中寫入了文字，並通過對應方式設定文字顏色和大小。

通過fillText()方法可以繪製填充文字，也可以通過strokeText()方法繪製描邊文字。

相關文章