提示💡
fillRect和clearRect、strokeRect
// 绘制图形
draw({ curScreenRatio = null, isShowCover }) {
const { canvas } = this;
if (curScreenRatio == null || !canvas) return;
const _16To9 = getRatioSize(canvas, 16 / 9);
const _9To16 = getRatioSize(canvas, 9 / 16);
const _4To3 = getRatioSize(canvas, 4 / 3);
const _1To1 = getRatioSize(canvas, 1);
const rectSize = {
2.35: [canvas.width, canvas.width / 2.35],
1.85: [canvas.width, canvas.width / 1.85],
'16:9': [_16To9.width, _16To9.height],
'9:16': [_9To16.width, _9To16.height],
'4:3': [_4To3.width, _4To3.height],
'1:1': [_1To1.width, _1To1.height],
}[curScreenRatio];
if (!rectSize) return;
if (isShowCover) {
this.drawFillRect(rectSize);
} else {
this.drawRect(rectSize);
}
},
// 绘制矩形框
drawRect(rectSize = [this.canvas.width, this.canvas.height]) {
const { canvas, ctx } = this;
ctx.strokeStyle = 'red';
this.clearCanvas();
ctx.strokeRect(
0.5 * (canvas.width - rectSize[0]),
0.5 * (canvas.height - rectSize[1]),
...rectSize,
);
ctx.stroke();
},
// 绘制填充矩形
drawFillRect(rectSize = [this.canvas.width, this.canvas.height]) {
const { canvas, ctx } = this;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.clearRect(
0.5 * (canvas.width - rectSize[0]),
0.5 * (canvas.height - rectSize[1]),
...rectSize,
);
ctx.stroke();
},