Canvas исчезает после события click

У меня проблема, когда я не знаю, куда идти.Canvas исчезает после события click

http://fiddle.jshell.net/f6rLds4g/3/

Когда я нажимаю 1 из черных прямоугольников она показывает «Прямоугольник 0 щелкнул», но холст исчезает.

Как я могу сделать это, чтобы показать его на холсте ???

for (var i = 0; i < rects.length; i++) { 
    if (x > rects[i][0] && x < rects[i][0] + rects[i][2] && y > rects[i][1] && y < rects[i][1] + rects[i][3]) { 
     document.getElementById("Display").innerHTML = 'Rectangle ' + i + ' clicked'; 
    } 
}

источник

2015-05-11 Anonymous

Вы заменяете содержание. 'document.getElementById (" Display "). innerHTML' заменит' canvas' на ''Rectangle' + i + 'clicked''. –

var canvas = $('#NodeList').get(0); 
 
var ctx = canvas.getContext('2d'); 
 
canvas.height = 0; 
 

 
var rects = [ 
 
    [20, 20, 150, 100], 
 
    [20, 220, 150, 100] 
 
    
 
    
 
    
 
]; 
 
for (var i = 0; i < rects.length; i++) { 
 
    canvas.height = canvas.height + 200; 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    //rectangles opnieuw tekenen 
 
    for (var j = 0; j < i; j++) { 
 
     ctx.fillRect(rects[j][0], 
 
     rects[j][1], 
 
     rects[j][2], 
 
     rects[j][3]); 
 
    } 
 
    ctx.fillRect(rects[i][0], 
 
    rects[i][1], 
 
    rects[i][2], 
 
    rects[i][3]); 
 

 
} 
 

 
$('#NodeList').click(function (e) { 
 
    var x = e.offsetX, 
 
     y = e.offsetY; 
 

 
for (var i = 0; i < rects.length; i++) { 
 
    if (x > rects[i][0] && x < rects[i][0] + rects[i][2] && y > rects[i][1] && y < rects[i][1] + rects[i][3]) { 
 
     var canvas = document.getElementById("NodeDisplay"); 
 
     var context = canvas.getContext('2d'); 
 
     context.clearRect(0, 0, canvas.width, canvas.height); 
 
     context.fillText('Rectangle ' + i + ' clicked', 10, 10); 
 
    } 
 
} 
 
});

html, body { 
 
      height: 100%; 
 
      overflow: hidden; 
 
      } 
 
b { 
 

 
margin-left: 75px; 
 

 
} 
 

 
#container { 
 
       margin-left:auto; 
 
       margin-right:auto; 
 
       text-align:center; 
 
       } 
 

 
a img { 
 
       border:none; 
 
} 
 

 

 
    
 
.scrollbar{ 
 
    width:220px; 
 
    height:1050px; 
 
    border:1px solid #000; 
 
    overflow:scroll; 
 
\t overflow-x: hidden; 
 
\t position: fixed; 
 

 

 

 
} 
 
.content{ 
 
width:auto; 
 
height:100%; 
 

 

 
} \t \t 
 

 
#Display { 
 

 
margin-left: 580px; 
 
float: left; 
 

 

 

 

 

 
}   
 

 

 

 

 

 

 
#NodeDisplay{ 
 

 
float: left; 
 
height: 300px; 
 
width: 600px; 
 
margin-left: -200px; 
 

 
\t 
 

 
} 
 

 

 

 
#canvas-wrap { 
 
    
 
position:fixed;     
 
margin-left: 380px; 
 
float: left; 
 
position: fixed; 
 
margin-top: 435px; 
 

 
    
 
    } 
 
#canvas-wrap canvas { 
 
    position:absolute; 
 
     top:0; 
 
     left:0; 
 
     z-index:0 } 
 

 
    
 
.een{ 
 
    
 
    height: auto; 
 
    width: 600px; 
 
    
 
} 
 

 
.twee{ 
 
    height: auto; 
 
    width: 600px; 
 
} 
 

 
.drie { 
 
    height: auto; 
 
    width: 600px; 
 
    
 
} 
 

 
.vier{ 
 
    height: auto; 
 
    width: 600px; 
 
    
 
}

<title>IIS7</title> 
 

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 

 

 

 
<body> 
 

 

 

 
<b>Nodes</b> 
 
<br> 
 

 
<div class="scrollbar"> 
 
<div class="content"> 
 

 
<canvas id="NodeList" width="200" height="300" > 
 
     
 
</canvas> 
 

 
</div> 
 
</div> 
 

 
<div class="Display" id="Display"> 
 
<canvas id="NodeDisplay" style="border:2px solid black;" > 
 
    
 
</canvas> 
 
</div> 
 
    
 
     
 
    <div id="canvas-wrap"> 
 
<canvas width="600" height="600" style="border:2px solid black;"></canvas> 
 
    <div id="overlay"></div> 
 
    <div class="een" style="border:2px solid black;" >11111 </div> 
 
    <div class="twee" style="border:2px solid black;" >22222 </div> 
 
    <div class="drie" style="border:2px solid black;" >33333</div> 
 
    <div class="vier" style="border:2px solid black;" >44444 </div> 
 
    
 
     
 

 
    
 
    </div> 
 
    </div> 
 
    
 
    
 
</body>

источник

2015-05-11 10:35:13

Это то, что мне нужно Спасибо большое !!!! –

Можете ли вы объяснить, почему это исправление? Я ищу ответ на мою похожую проблему, но ваш ** КОД ТОЛЬКО ОТВЕТ НЕ ПОМОГАЕТ ЛЮБОЙ, НО ЧЕЛОВЕК, КОТОРЫЙ С ИСПОЛЬЗОВАНИЕМ ТОЧНЫХ ЖЕСТКИХ ПЕРЕМЕННЫХ ** – haykam

Canvas исчезает после события click

ответ

Смежные вопросы