在canvas上面绘制矩形

Question

问题：在canvas上面绘制矩形
期望效果：

解决方案：

<div class="box">
        <!-- 当没有设置宽和高时，canvas初始化宽为300，高为150像素 -->
        <canvas ref="canvas" width="600" height="400"></canvas>
</div>

// 获取canvas对象，通过 getContext() 方法来获得渲染上下文和它的绘画功能
        const ctx = this.$refs.canvas.getContext('2d');
// 设置矩形的边框颜色
        ctx.strokeStyle = 'red';
// 设置边框宽度
        ctx.lineWidth = 3;
// 设置虚线
        ctx.setLineDash([8, 2]);
// 绘制矩形边框
        ctx.strokeRect(x, y, width, height);
// 设置矩形的填充颜色
        ctx.fillStyle = 'orange';
// 绘制填充矩形
        ctx.fillRect(x, y, width, height);

详细内容：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes