腾讯欢乐捕鱼刷金币|腾讯欢乐捕鱼大战技巧

canvas 寫入文本內容

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

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

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

代碼實例如下:

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


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
腾讯欢乐捕鱼刷金币 推牌九必胜绝技 电瓶车锂电池维修赚钱吗 海南七彩票 黄金棋牌游戏官网 试机号福彩3d试机号走势图带连线 14场胜负彩20.期 安徽11选5遗漏查询 广东快乐号码预测 扑克牌有哪些玩法及规则大全 6肖中特期期