最近在學習Vue，發現它有很多有趣的功能。其中一個功能是鼠標畫矩形。

mounted() {
this.ctx = this.canvas.getContext('2d');
this.canvas.addEventListener('mousedown', this.onMouseDown);
this.canvas.addEventListener('mouseup', this.onMouseUp);
this.canvas.addEventListener('mousemove', this.onMouseMove);
},
methods: {
onMouseDown(evt) {
this.mouseDown = true;
this.startX = evt.offsetX;
this.startY = evt.offsetY;
},
onMouseUp(evt) {
this.mouseDown = false;
const rect = this.getRect(evt.offsetX, evt.offsetY);
console.log(rect);
},
onMouseMove(evt) {
if (this.mouseDown) {
this.clear();
this.draw(this.startX, this.startY, evt.offsetX, evt.offsetY);
}
},
draw(x1, y1, x2, y2) {
const rect = this.getRect(x1, y1, x2, y2);
this.ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
},
clear() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
getRect(x1, y1, x2, y2) {
const x = Math.min(x1, x2);
const y = Math.min(y1, y2);
const w = Math.abs(x1 - x2);
const h = Math.abs(y1 - y2);
return {x, y, w, h};
}
}

首先，在Vue的mounted生命周期函數中，我們要獲取canvas元素和綁定鼠標事件。這里分別是mousedown、mouseup和mousemove事件。

當鼠標按下時，我們會記錄下鼠標的位置，并將mouseDown這個屬性設置為true。當鼠標抬起時，我們會將mouseDown設置為false，并調用getRect方法，獲取矩形的坐標和寬高。最后，我們會將這些信息打印到控制臺。

在mousemove事件中，如果mouseDown是true，說明鼠標仍然按下，此時會調用clear和draw方法。clear方法用于清空畫布，draw方法用于繪制矩形。其中，draw方法會調用getRect方法，獲取矩形的坐標和寬高，并使用strokeRect方法繪制矩形。

最后，我們來看看getRect方法。該方法接收四個參數，分別是鼠標按下和抬起時的x、y坐標。我們會用Math.min和Math.abs函數計算出矩形的坐標和寬高，并返回一個對象，包含x、y、w和h四個屬性。