range 相关问题

我试图简单地移动光标，以便当光标在 200=x 和 300=x 之间时，画布背景变为鲑鱼色，超出该范围则变为蓝色。这是我的完整尝试。我试图简单地移动光标，以便当它在 200=x 和 300=x 之间时，画布背景变为鲑鱼色，超出该范围则变为蓝色。这是我的全部尝试。 <!DOCTYPE html> <html> <head> <style> body{ margin:10px; background:#CCC; } #my_canvas{ background:#FFF; border:#000 1px solid; } </style> <script> function initCanvas(){ var ctx = document.getElementById('my_canvas').getContext('2d'); ctx.canvas.addEventListener('mousemove', function(event){ var mouseX = event.clientX - ctx.canvas.offsetLeft; var mouseY = event.clientY - ctx.canvas.offsetTop; var status = document.getElementById('status'); status.innerHTML = mouseX+" | "+mouseY; }); ctx.canvas.addEventListener('click', function(event){ var mouseX = event.clientX - ctx.canvas.offsetLeft; var mouseY = event.clientY - ctx.canvas.offsetTop; // alert(mouseX+" | "+mouseY); ctx.fillStyle = "orange"; ctx.fillRect(mouseX-15, mouseY-15, 30, 30); }); } window.addEventListener('load', function(event) { initCanvas(); }); </script> </head> <body> <canvas id="my_canvas" width="500" height="300"> <script> const ctx = my_canvas.getContext("2d"); ctx.fillStyle = "salmon"; // Create a Canvas: //const canvas = document.getElementById("myCanvas"); // Define a new path ctx.beginPath(); // Set a start-point ctx.moveTo(200,150); // Set an end-point ctx.lineTo(200, 500); // The other vertical line ctx.moveTo(300, 150); ctx.lineTo(300, 500); ctx.stroke(); if ((mouseX > 200 && mouseX < 300)) { ctx.fillStyle = "blue"; } ctx.stroke(); </script> </canvas> <h2 id="status">0 | 0</h2> </body> </html 任何帮助将不胜感激。谢谢，肖恩您可以添加检查并按条件设置颜色。 function initCanvas() { const ctx = document.getElementById('my_canvas').getContext('2d'); ctx.canvas.addEventListener('mousemove', function(event) { const mouseX = event.clientX - ctx.canvas.offsetLeft, mouseY = event.clientY - ctx.canvas.offsetTop, status = document.getElementById('status'); status.innerHTML = mouseX + " | " + mouseY; }); ctx.canvas.addEventListener('click', function(event) { const mouseX = event.clientX - ctx.canvas.offsetLeft, mouseY = event.clientY - ctx.canvas.offsetTop; ctx.fillStyle = mouseX >= 200 && mouseX <= 300 ? 'orange' : 'blue'; ctx.fillRect(mouseX - 15, mouseY - 15, 30, 30); }); } const ctx = my_canvas.getContext("2d"); ctx.fillStyle = "salmon"; ctx.beginPath(); ctx.moveTo(200, 150); ctx.lineTo(200, 500); ctx.moveTo(300, 150); ctx.lineTo(300, 500); ctx.stroke(); window.addEventListener('load', initCanvas); body { margin: 10px; background: #CCC; } #my_canvas { background: #FFF; border: #000 1px solid; } <canvas id="my_canvas" width="500" height="300"> </canvas> <h2 id="status">0 | 0</h2>

javascript conditional-statements range coordinates

回答 1 投票 0

在显示范围的子图中单击时，将跨度中心移动到不显示范围的单击位置

我创建了一个 2 个情节的子图。在两个子图中选择范围效果很好。单击上方的子图（缩放图）可以很好地移动两个视图，但是当单击下方的子图（总视图）时

python matplotlib range subplot

回答 0 投票 0

range 相关问题

最新问题