第 5 课 9 / 19 | 编码:L05-12
核心知识

绘制文字

先设置字体和字号,再决定文字对齐到哪里,最后用 fillText() 把文字画出来。

<style>
body {
  font: 20px/1.5 sans-serif;
  padding: 16px;
  color: #20354e;
}
button, input, select { font: inherit; }

</style>
<canvas id="poster" width="640" height="360" style="max-width:100%;height:auto;border:1px solid #aaa">黄梅戏分享会海报</canvas>
<script>
const canvas = document.querySelector('#poster');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#173b7a';
ctx.font = 'bold 42px sans-serif';
ctx.textAlign = 'left';
ctx.fillText('黄梅戏分享会', 48, 120);
</script>