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

矩形与颜色

fillRect 画实心矩形,strokeRect 只画矩形边框。先设置颜色,再调用绘图方法。

<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 = '#0b5d66';
ctx.fillRect(0, 0, 640, 360);
ctx.strokeStyle = '#ffffff';
ctx.strokeRect(24, 24, 592, 312);
</script>