Desenare sageata in Canvas nu functioneaza

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
andras
Mesaje: 430

Desenare sageata in Canvas nu functioneaza

Salut,
Am luat sa folosesc scriptul de la: https://coursesweb.net/javascript/draw-a ... cks-canvas
Din pacate n-am priceput chiar totul, la mine nu functioneaza butonul "Enable drawing". Am 2 div-uri in HTML:
In primul div sint butoanele:

Cod: Selectaţi tot

<div id="sageti" >
<button id="btn_drawar">Enable Drawing</button> 
<button id="btn_delar">Delete Arrows</button> 
 <a id="btn_getimg">Get Image</a>
<input type="button" id="backBtn" class="buton" value="<?php echo $lsite['ok']; ?>" style="width: 200px; height: 40px; float: right;" onclick="savepng(); hideacces();"/>
</div>
<div id="diagrama" > </div>
In al doilea div id="diagrama" pun alte 3 div-uri care au deja piese pe tabla si mutari efectuate (un div cu pozitia initiala, al doilea div cu mutarile PGN si al treilea div cu pozitia finala dupa efectuarea mutarilor), toate aceste 3 div-uri in prealabil le convertesc si le adaug la div id="diagrama" cu functia JS savecanvas() :

Cod: Selectaţi tot

<script>
function savecanvas() {
html2canvas( document.getElementById('board'), { // pozitia initiala
onrendered: function(canvas) {
 document.getElementById('diagrama').appendChild(canvas);
          }
 });
html2canvas( document.getElementById('pegene'), { // mutari pgh
onrendered: function(canvas) {
 document.getElementById('diagrama').appendChild(canvas);
          }
 });
html2canvas( document.getElementById('boardnou'), { // pozitia finala
onrendered: function(canvas) {
 document.getElementById('diagrama').appendChild(canvas);
          }
 });
}
</script>
Initial div-urile id="sageti" si id="diagrama" sint display: none; le fac vizibile simultan dupa functia JS savecanvas(),
iar scriptul de pe site l-am pus in <body>. Am incercat in script cu variabila

Cod: Selectaţi tot

<script>
var cnv_id = 'boardnou';
</script>
si cu celelalte
var cnv_id = 'diagrama'; dar nu functioneaza butonul id="btn_drawar" (nu se coloreaza in rosu, deci nu traseaza sageti). Apar toate dar nu functioneaza. Unde am gresit? Multumesc.
MarPlo Mesaje: 4343
Salut,
La "var cnv_id" se pune id-ul elementului <canvas> in care vrei sa trasezi sageti.
Adauga un id unic la acel <canvas>, apoi pune acel id ca valoare la "var cnv_id".
- Scriptul lucreaza cu un <canvas> care are ID.
andras Mesaje: 430
Multumesc, s-a rezolvat. Am adugat id cu:

Cod: Selectaţi tot

<script>
html2canvas( document.getElementById('board'), { // pozitia initiala
  onrendered: function(canvas) {
    canvas.id = "canvasid";
    document.getElementById('diagrama').appendChild(canvas);
  }
});
</script>
si a mers. Salut!