canvas 写入文本内容

2019-8-25 09:48| 作者: admin| 查看: 4253| 评论: 0|来自: 蚂蚁部落

实际应用中可能需要向图案中写入文本内容。

下面将通过代码实例演示一下如何实现标题中的效果。

代码实例如下:

[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()方法绘制描边文本。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部