響應 canvas javascript blobby 不起作用

Question

我想在我的 web 中制作一個類似於附加鏈接效果的斑點。 [鏈接]https://codepen.io/JuanFuentes/pen/mNVaBX

但是當我嘗試縮放網頁時，我發現 blob 沒有響應。 斑點仍在原來的 position 中。

有朋友可以幫幫我嗎？

Answer 1

僅僅調整 canvas 的大小是不夠的。 您還應該根據新的 canvas 尺寸/高度重新定位球的頂點。

這是更新的代碼： https://codepen.io/gbniklov/pen/xxZBVMX?editors=0010

注意第 52 行：

this.resize = function (deltaX, deltaY) {
// deltaX and deltaY are the difference between old canvas width / height and new ones
            for (let i = 0; i < this.vertex.length; i++) {
                const vertex = this.vertex[i]
                vertex.x += deltaX
                vertex.y += deltaY
            }
        }

編輯：如您所見，blob 需要一些時間才能在調整大小時將其頂點設置為新的 position。 我不確定這對您的目的是好是壞。 更高級的解決方案是停止 requestAnimationFrame() 更新循環，將頂點更新到它們的新位置，然后才再次開始循環（因此 blob 立即“捕捉”到其右側 position）。

編輯 2：使用new關鍵字調用構造函數時，您不需要從構造函數返回this ，JS 會自動為您執行此操作：

var Blob = function(args) {
 // ...
 return this // <- thats not needed!
}

在此處閱讀有關this屬性及其與 JS 中的類的關系的更多信息