canvas 寫入文本內容

2019-8-25 09:48| 作者: admin| 查看: 11147| 評論: 0|來自: 螞蟻部落

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

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

代碼實例如下:

[HTML] 純文本查看 復制代碼运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.kolabortv.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()方法繪制描邊文本。


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
亚洲骑兵 - 东方AV在线,我想看美女下面的毛,大香蕉一本道久在线 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>