मैं मूल कैनवास के संदर्भ और डेटा के साथ क्लोन HTML कैनवास तत्व को कैसे अपडेट करूं?

Question

मैंने एक स्क्रिप्ट लिखी है जो उपयोगकर्ताओं को एचटीएमएल 5 कैनवास तत्व के शीर्ष पर सरल रेखाएं खींचने की अनुमति देती है। अंतिम लक्ष्य यह है कि इस चित्र को टाइल किया जा रहा है और शेष ब्राउज़र में दोहराया गया है। मुझे पृष्ठ पर एक क्लोन कैनवास मिला है, लेकिन मैं कई कैनवास के शीर्ष पर एक ही लाइन को एक साथ खींचने के तरीके पर संघर्ष कर रहा हूं।

मैं नीचे

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 आउटपुट;

आशा में मदद करता है,