如何使用原始畫布的上下文和數據更新克隆的HTML畫布元素？

Question

我寫了一個腳本，允許用戶在html 5 canvas元素上繪製簡單的線條。最終目標是讓此圖形在整個瀏覽器中平鋪並重復。我已經在頁面上獲得了一張克隆的畫布，但我正在努力如何在多個畫布上同時繪製相同的線條。

我將粘貼下面

var size = 40; 
var md = false; 
var canvas = document.getElementById('canvas'); 
canvas.addEventListener('mousedown', down); 
canvas.addEventListener('mouseup', toggledraw); 

canvas.width = 600; 
canvas.height = 600; 

canvas.addEventListener('mousemove', move); 

function move(evt){ 

    var mousePos = getMousePos(canvas, evt); 
    var posx = mousePos.x; 
    var posy = mousePos.y; 
    draw(canvas, posx, posy); 

    window.posx; 


    return mousePos; 



}; 


function down(){ 
    md = true; 
} 

function toggledraw(){ 
    md = false; 
} 

function getMousePos(canvas, evt){ 
    var rect = canvas.getBoundingClientRect(); 
    return{ 
    x:evt.clientX - rect.left, 
    y:evt.clientY - rect.top 
    }; 
}; 

function draw(canvas, posx, posy){ 
    var context = canvas.getContext('2d'); 


    if(md){ 
    context.fillRect(posx, posy, size, size) 
    } 

}; 

cloneCanvas(canvas, window.posx, window.posy, size); 

function cloneCanvas(canvas, posx, posy, size,) { 
    console.log(posx); 


    var newCanvas = document.createElement('canvas'); 
    var context = newCanvas.getContext('2d'); 
    newCanvas.className = "newNew"; 


    newCanvas.width = canvas.width; 
    newCanvas.height = canvas.height; 
    document.body.appendChild(newCanvas); 



    //context.fillRect(posx, posy, size, size) 
    context.drawImage(canvas, posx, posy); 



    return canvas; 
} 

Answer 1

的方式，我會去它的主畫布上繪製後更新克隆的畫布。

根據您當前的代碼，我首先要返回克隆的畫布而不是舊的畫布。這樣你可以參考它。

function cloneCanvas(canvas, posx, posy, size,) { 
    ... 
// --> return canvas; 
return newCanvas // Becomes this. 
} 

接下來，望着行：

cloneCanvas(canvas, window.posx, window.posy, size); 

我看到你正在使用自己的 「POSX」 和 「花束」 變量。我會擺脫那些，因爲你總是想複製整個畫布。 （在這種情況下）。改變這樣的線

var clone = cloneCanvas(canvas, 0, 0, size); 

接下來，我寫了一個輔助函數來鏈接兩個畫布。

function drawFromSource(source, destination) { 
    return function() { 
    var context = destination.getContext('2d'); 
    context.clearRect(0, 0, destination.width, destination.height); 
    context.drawImage(source, 0, 0); 
    } 
} 

該函數返回一個回調函數，該函數在被調用時將原始畫布繪製到克隆的畫布上。

你初始化像這樣：

var updateClone = drawFromSource(canvas, clone); 

最後但並非最不重要的，你必須將新創建的回調加入到抽獎功能。在繪製到主畫布上之後。

function draw(canvas, posx, posy) { 
    var context = canvas.getContext('2d'); 
    if (md) { 
    context.fillRect(posx, posy, size, size) 
    updateClone(); 
    } 

}; 

瞧！ 這是一個工作代碼的鏈接，我轉移了一些代碼。

https://jsfiddle.net/30efdvz3/5/

只是爲了好玩。瓷磚版只是改變「numberofTiles」

https://jsfiddle.net/30efdvz3/3/

Answer 2

我的代碼試試這個代碼

在這個我已經創造了根據帆布註冊鼠標事件的功能。併爲所有畫布調用此函數。

var size = 40; 
var md = false; 
var canvas1 = document.getElementById('canvas'); 
registerEvents(canvas1) 
function move(evt){ 
    console.log(evt.target.id); 
    var canvas = document.getElementById(evt.target.id); 
    var mousePos = getMousePos(canvas, evt); 
    var posx = mousePos.x; 
    var posy = mousePos.y; 
    draw(canvas, posx, posy); 
    window.posx; 
    return mousePos; 
}; 

function registerEvents(canvas){ 
    canvas.addEventListener('mousedown', down); 
    canvas.addEventListener('mouseup', toggledraw); 
    canvas.width = 600; 
    canvas.height = 600; 
    canvas.addEventListener('mousemove', move); 
} 
function down(){ 
    md = true; 
} 

function toggledraw(){ 
    md = false; 
} 

function getMousePos(canvas, evt){ 
    var rect = canvas.getBoundingClientRect(); 
    return{ 
     x:evt.clientX - rect.left, 
     y:evt.clientY - rect.top 
    }; 
}; 

function draw(canvas, posx, posy){ 
    var context = canvas.getContext('2d'); 
    if(md){ 
     context.fillRect(posx, posy, size, size) 
    } 
}; 
cloneCanvas(canvas, window.posx, window.posy, size); 
function cloneCanvas(canvas, posx, posy, size,) { 
    console.log(posx); 
    var newCanvas = document.createElement('canvas'); 
    var context = newCanvas.getContext('2d'); 
    var id = "newCanvas"; 
    newCanvas.className = "newNew"; 
    newCanvas.id = id; 
    newCanvas.width = canvas.width; 
    newCanvas.height = canvas.height; 
    newCanvas.style.border = "1px solid black"; 
    document.body.appendChild(newCanvas); 
    context.drawImage(canvas, posx, posy); 
    registerEvents(document.getElementById(id)) 
    return canvas; 
} 

Here is working fiddle

Answer 3

其實你很接近，我已經做只是一些變化，取得你想要的是什麼，這裏是result。

function cloneCanvas(canvas, posx, posy, size,) { 
    var newCanvas = document.createElement('canvas'); 
    var context = newCanvas.getContext('2d'); 
    ... 
    return context; // this should return the context! 
} 

而且，

var clonedCanvas = cloneCanvas(canvas, window.posx, window.posy, size); 
// after you call the function get the 2d context to variable. 

最新的變化是，

function draw(canvas, posx, posy){ 
    var context = canvas.getContext('2d'); 
    if(md){ 
    clonedCanvas.fillRect(posx, posy, size, size); // fillRect to variable that you defined at above, 
    context.fillRect(posx, posy, size, size) 
    } 
}; 

的jsfiddle輸出;

希望幫助，