核心知识
矩形与颜色
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>