单击事件后画布消失

Question

我遇到了一个我不知道去哪里的问题。

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';
    }
}

Answer 1

  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; overflow-x: hidden; position: fixed; } .content{ width:auto; height:100%; } #Display { margin-left: 580px; float: left; } #NodeDisplay{ float: left; height: 300px; width: 600px; margin-left: -200px; } #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>

单击事件后画布消失

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-05-11 10:35:13

单击事件后画布消失

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-05-11 10:35:13

解决方案1
1 已采纳 2015-05-11 10:35:13