空心文本绘制
上一节我们学习了利用 fillText
绘制一行有填充的文本,既然有填充的文本,那也就有只有描边的,也就是空心文本,本小节我们就学习利用 Text
绘制一行空心文本。
在 canvas 的 API 中已经封装了绘制空心文本的:Text
。
先看案例:
<!DOCTYPE html>
<html>
<head>
< charset="utf-8">
<title>网Wiki</title>
<style>
#imooc{
border:px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
<script>
const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');
ctx.font="40px Microsoft YaHei"
ctx.Text("Wiki", , ) //绘制文本
</script>
<body>
</html>
运行结果:
上面我们就绘制了一行空心文本。
本小节中我们使用到新的,Text
,它的使用和 fillText
完全相同。
Text
作用是绘制一行空心。
语法:
变量说明:
本小节我们主要学习了第二种绘制文本的:Text
,canvas 也只有这两种绘制文本的。绘制文本时有注意事项:这两种绘制文本都只能绘制单行文本,目前 canvas 绘制多行文本。