如何無限期地製作html畫布「滾動」？

我有一個畫布元素，當加載時會自動填充客戶端的整個瀏覽器窗口。在它上面，你可以用鼠標進行繪製，就像任何「製作繪圖板」 - 在那裏的教程一樣。然而，我想要做的是，如果你將鼠標移動到畫布的任何極端（或者選擇某個「移動」工具，你可以將畫布向任意方向拖動），那麼滾動。特別是，我希望它有可能在理論上永遠滾動，所以我不能真正預生成，我必須在飛行中生成「更多畫布」。有沒有人知道如何做到這一點？如何無限期地製作html畫布「滾動」？

如果有幫助，這是客戶端，現在的javascript：（html的只是一個畫布標記）

$(document).ready(function() { 
    init(); 
}); 

function init() { 
    var canvas = document.getElementById('canvas') 
     , ctx = canvas.getContext('2d') 
     , width = window.innerWidth 
     , height = window.innerHeight; 

    // Sets the canvas size to be the same as the browser size 
    canvas.width = width; 
    canvas.height = height; 

    // Binds mouse and touch events to functions 
    $(canvas).bind({ 
     'mousedown': startDraw, 
     'mousemove': draw, 
     'mouseup': stopDraw, 
    }); 
}; 

// Triggered on mousedown, sets draw to true and updates X, Y values. 
function startDraw(e) { 
    this.draw = true; 
    this.X = e.pageX; 
    this.Y = e.pageY; 
}; 

// Triggered on mousemove, strokes a line between this.X/Y and e.pageX/Y 
function draw(e) { 
    if(this.draw) { 
     with(ctx) { 
      beginPath(); 
      lineWidth = 4; 
      lineCap = 'round'; 
      moveTo(this.X, this.Y); 
      lineTo(e.pageX, e.pageY); 
      stroke(); 
     } 
     this.X = e.pageX; 
     this.Y = e.pageY; 
    } 
}; 

// Triggered on mouseup, sets draw to false 
function stopDraw() { 
    this.draw = false; 
};

來源

2011-03-28 mag

您是否嘗試設置一個變量來保存X和Y滾動值，然後將其添加到您繪製的任何座標中？ – Delta 2011-03-29 04:09:50

你有沒有得到這個工作版本？ – skalb 2012-03-21 20:51:32

[Make a canvas infinite]可能的重複（http://stackoverflow.com/questions/38589304/make-a-canvas-infinite） – bummi 2016-12-31 16:38:46

canvas元素使用計算機的實際內存，所以沒有無限帆布永遠滾動。但是，您可以使用虛擬畫布來模擬此行爲。只需將draw（）捕獲的xy座標記錄到數組中，並在鼠標觸及邊界時計算虛擬畫布的新中心。然後濾出符合中心+屏幕尺寸的xy座標並繪製它們。

但是，記錄xy座標的數組無法無限增長，並且濾波器代碼在數組大小上會變慢。足夠10,000點嗎？

更優化的代碼會將鼠標線條轉換爲樣條線，並只保存重繪鼠標（平滑）路徑所需的點。

來源

2011-03-29 07:53:48 noiv

>畫布元素使用計算機的真實內存，所以沒有無限的畫布永遠捲動。是的，我明白了。現在，我將每個繪製的線路用socket.io發送到node.js-server，因此它可能會存儲在服務器端。預先渲染的意思是，一旦用戶開始向一個方向滾動/移動，客戶端會先要求提供該方向的內容的數據，然後在進入視圖之前進行繪製。 – mag 2011-03-29 15:12:25

一旦將虛擬畫布的寬度和高度設置爲上限，就有了解決方案。 – noiv 2011-03-29 17:21:07

我不確定我明白你的意思。現在我根本沒有虛擬畫布，用戶可以在他的瀏覽器窗口中繪製空間，就是這樣。你的意思是我應該以某種方式提取座標，並計算「真實」畫布的偏移量？ – mag 2011-03-29 18:14:17

如何無限期地製作html畫布「滾動」？

回答

相關問題