Làm cách nào để cập nhật phần tử canvas HTML nhân bản với bối cảnh và dữ liệu của canvas gốc?

Question

Tôi đã viết một tập lệnh cho phép người dùng vẽ các đường đơn giản trên đầu trang của phần tử canvas 5 HTML5. Mục tiêu cuối cùng là để bản vẽ này được lát gạch và lặp đi lặp lại trong phần còn lại của trình duyệt. Tôi đã nhận được một bức tranh nhân bản vào trang nhưng đang đấu tranh về cách vẽ các đường cùng một lúc trên cùng của nhiều khung vẽ.

tôi sẽ dán mã của tôi dưới đây

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

Con đường tôi sẽ đi về nó là để cập nhật các canvas nhân bản sau khi vẽ trên vải chính.

Dựa trên mã hiện tại của bạn trước tiên tôi muốn trả lại canvas nhân bản thay vì canvas cũ. Bằng cách này bạn có một tham chiếu đến nó.

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

Tiếp theo, nhìn vào dòng:

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

Tôi thấy rằng bạn đang sử dụng "posx" của riêng bạn và "bó hoa" biến. Tôi sẽ loại bỏ chúng vì bạn sẽ luôn luôn muốn sao chép toàn bộ khung hình. (Trong trường hợp này). Thay đổi dòng như thế này

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

Tiếp theo, tôi đã viết một chức năng trợ giúp nhỏ để liên kết hai canvas.

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

Hàm này trả về một cuộc gọi lại khi được gọi vẽ canvas gốc lên khung hình nhân bản.

Bạn khởi tạo nó như thế này:

var updateClone = drawFromSource(canvas, clone); 

Và cuối cùng nhưng không kém phần quan bạn phải thêm gọi lại mới được tạo ra vào chức năng vẽ. Ngay sau khi bạn vẽ lên khung chính của mình.

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

}; 

Thì đấy! Đây là một liên kết đến mã làm việc, tôi đã chuyển một số mã của bạn xung quanh.

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

Chỉ để cho vui. phiên bản lát gạch chỉ cần thay đổi "numberofTiles"

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

Answer 2

Hãy thử mã này

Trong này tôi đã tạo ra một chức năng cho đăng ký sự kiện chuột theo canvas. và gọi hàm này cho tất cả canvas.

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

Trên thực tế bạn rất thân thiết, tôi đã thực hiện chỉ một số thay đổi và đạt được những gì bạn mong muốn, đây là result.

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

Và,

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

thay đổi cuối là,

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 đầu ra;

Hope giúp,