文本绘制
canvas 中不光是绘制一些图案，有时候我们还需要对进行绘制，本小节我们就学习 canvas 中如何绘制文本。
在 canvas 的 API 中已经封装了绘制文本的：fillText，我们可以直接使用。
先看案例：
<!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.fillText("Wiki", , ) //绘制文本
</script>
<body>
</html>
运行结果：
上面我们就绘制了一行文本，但是我们可以发现，这个字很小，如果我们想字体样式，那就需要用到设置字体：font 了，在 canvas 中使用 font 和 CSS font 规范相同。
看案例：
<!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.fillStyle = "#456795"
ctx.font="60px Microsoft YaHei" //设置字体样式
ctx.fillText("Wiki", , ) //绘制文本
</script>
<body>
</html>
运行结果：
这样我们就绘制了 60px 的微软雅黑。
本小节中我们使用到新的，fillText。
fillText 作用是绘制一行。
语法：
void ctx.fillText(text, x, y [, maxWidth]);
变量说明
本小节中我们使用到新的，它就是 font，此和 CSS 的 font 值相同。
font 作用是设置绘制文本的样式。
变量说明：
本小节我们主要学习了利用 fillText 绘制一行文本，利用 font 设置绘制文本的样式。下一小节我们将学习如何绘制空心文本。
602392714
清零编程群