如何用JavaScript实现Canvas鼠标X轴区间背景变色效果？

核心修改思路 #

• 移除Canvas标签内部的无效脚本（Canvas内部内容仅作为浏览器不支持Canvas时的降级显示，脚本不会被执行）
• 在mousemove事件回调中处理背景色切换逻辑
• 两种切换背景的方式：直接修改Canvas的CSS背景色（性能更优），或者用Canvas绘图API填充整个画布

具体修改步骤 #

1. 删除Canvas内部的script代码：这段代码属于无效代码，直接移除即可。
2. 在mousemove事件中添加背景切换逻辑：
   • 计算鼠标在Canvas内的X坐标mouseX
   • 判断mouseX是否处于200-300区间内，切换对应背景色
3. 可选：保留垂直参考线：如果需要显示200和300的X坐标参考线，把绘制线条的代码放到initCanvas函数中，确保页面加载时执行

完整修正代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 10px;
            background: #ccc;
        }
        #my_canvas {
            background: blue; /* 默认背景设为blue */
            border: #000 1px solid;
        }
    </style>
    <script>
        function initCanvas() {
            var canvas = document.getElementById("my_canvas");
            var ctx = canvas.getContext("2d");
            
            // 绘制200和300X坐标的垂直参考线
            ctx.beginPath();
            ctx.moveTo(200, 0);
            ctx.lineTo(200, canvas.height);
            ctx.moveTo(300, 0);
            ctx.lineTo(300, canvas.height);
            ctx.stroke();

            // 鼠标移动事件处理
            canvas.addEventListener("mousemove", function (event) {
                var mouseX = event.clientX - canvas.offsetLeft;
                var mouseY = event.clientY - canvas.offsetTop;
                var status = document.getElementById("status");
                status.innerHTML = mouseX + " | " + mouseY;
                
                // 切换背景色：用CSS背景色更高效
                if (mouseX > 200 && mouseX < 300) {
                    canvas.style.background = "salmon";
                } else {
                    canvas.style.background = "blue";
                }
            });

            // 保留原有的点击绘制矩形功能
            canvas.addEventListener("click", function (event) {
                var mouseX = event.clientX - canvas.offsetLeft;
                var mouseY = event.clientY - canvas.offsetTop;
                ctx.fillStyle = "orange";
                ctx.fillRect(mouseX - 15, mouseY - 15, 30, 30);
            });
        }
        window.addEventListener("load", initCanvas);
    </script>
</head>
<body>
    <canvas id="my_canvas" width="500" height="300"></canvas>
    <h2 id="status">0 | 0</h2>
</body>
</html>

补充说明 #

如果想用Canvas绘图API设置背景（比如需要和其他Canvas图形叠加），可以把背景色切换代码改成：

if (mouseX > 200 && mouseX < 300) {
    ctx.fillStyle = "salmon";
} else {
    ctx.fillStyle = "blue";
}
// 填充整个画布作为背景
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 重新绘制参考线，因为fillRect会覆盖之前的内容
ctx.beginPath();
ctx.moveTo(200, 0);
ctx.lineTo(200, canvas.height);
ctx.moveTo(300, 0);
ctx.lineTo(300, canvas.height);
ctx.stroke();

内容的提问来源于stack exchange，提问作者ofey