我试图简单地移动光标，以便当它在 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>