Vue.js Canvas 元素跟隨鼠標

Question

我在Vue中制作了顏色選擇器，基於HTML canvas，我想在顏色選擇器上添加顯示活動顏色的透明圓圈，它將跟隨鼠標在canvas上。

我嘗試將此代碼更改為我的用法： Make "ball" follow mouse on canvas ，這就是我得到的：

如您所見，我的圈子跟隨鼠標 position，但留下痕跡。 鼠標 position 動態更新為 state 並且我的 function 中的 XY 數據是從 Z9ED39E25EA312EFA56B76A 接收的

loop(X, Y) {
   this.moveCursor(X, Y)
   requestAnimationFrame(this.loop)
},
moveCursor(X, Y) {
   const colorPickerBlock = document.getElementById('color_picker-block');
   const blockCtx = colorPickerBlock.getContext('2d');

   blockCtx.beginPath();
   blockCtx.arc(X, Y, 6, 0, 2 * Math.PI);
   blockCtx.fillStyle = "transparent";
   blockCtx.fill();
   blockCtx.lineWidth = 1;
   blockCtx.strokeStyle = "white";
   blockCtx.stroke();                
   },
mousedown(event) {
   this.isDragActive = true;
},
mousemove(event) {
  if (this.isDragActive) {
        this.changeLocalColor(event)
        this.loop(this.getActiveElementColor.X, this.getActiveElementColor.Y)
 }
},
mouseup(event) {
   if (this.isDragActive) {
        this.isDragActive = false;
   }
}

Answer 1

您必須在移動光標之前將 canvas 的 state 重置為初始值。 我不知道 canvas 是僅用於顯示圓形還是用於顯示調色板。 如果 canvas 只顯示圓圈，那么您需要

context.clearRect(0, 0, canvas.width, canvas.height);

否則你還需要再次繪制整個調色板。

resetPalette ()
{
    this.context.clearRect(0, 0, canvas.width, canvas.height);
    // steps to init palette from the start
}

我還建議將上下文分配為變量，而不是每次都獲取它。