如何在HTML代码中存储数据到变量？HTTP请求值存储与Canvas条件绘图实现求助

我来帮你排查代码里的问题，一步步解决这个变量存储和条件判断的问题：

核心问题分析 #

你的代码主要有3个关键问题导致无法正常工作：

1. 变量作用域与异步执行问题 #

AJAX请求是异步的，你在回调函数内部定义的temperature是局部变量，外部的canvas绘制代码会在AJAX请求完成前就执行，根本拿不到请求返回的值。而且就算请求完成，外部也访问不到回调里的局部变量。

2. 条件判断的语法与逻辑错误 #

• if (temperature = 0) 这里是赋值操作（=），不是相等判断，应该用严格相等===或者松散相等==
• 拼写错误：temperatue少了一个字母r，应该是temperature
• 逻辑错误：temperature <= 30 || temperature >= 20 这个条件会匹配所有数值（因为任何数要么<=30要么>=20），如果你想匹配20到30之间的数值，应该用逻辑与&&

3. 绘制逻辑的时机错误 #

绘制操作必须等到AJAX请求成功拿到数据后再执行，不能提前执行。

修正后的完整代码 #

var canvas = document.getElementById("DemoCanvas");

// 先获取canvas上下文，避免重复获取
var ctx = null;
if (canvas.getContext) {
    ctx = canvas.getContext('2d');
}

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        // 把temperature提升到外部作用域，或者直接在回调里处理绘制
        var temperature = parseFloat(this.responseText);
        // 确保ctx存在再执行绘制
        if (ctx) {
            drawTemperatureRect(temperature);
        }
    }
};
// 别忘了发送请求！你原来的代码里没写xhttp.open和xhttp.send
xhttp.open("GET", "你的请求URL", true);
xhttp.send();

// 把绘制逻辑封装成函数，更清晰
function drawTemperatureRect(temp) {
    // 先清空画布（可选，避免重复绘制）
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制基础边框
    ctx.lineWidth = "3";
    ctx.strokeStyle = "green";
    ctx.strokeRect(5, 50, 350, 200);
    ctx.lineJoin = "round";
    ctx.strokeRect(355, 140, 40, 30);

    // 根据温度值判断填充逻辑
    if (temp === 0) {
        ctx.fillStyle = 'rgb(102, 204, 0)';
        ctx.fillRect(9, 55, 50, 190);
    } else if (temp >= 20 && temp <= 30) {
        ctx.fillStyle = 'rgb(102, 204, 0)';
        ctx.fillRect(8, 55, 150, 190);
    } else if (temp === 5) {
        // 你提到的半填充矩形逻辑，这里示例写一个
        ctx.fillStyle = 'rgba(102, 204, 0, 0.5)'; // 用rgba设置半透明实现半填充效果
        ctx.fillRect(8, 55, 175, 190);
    } else if (temp === 10) {
        // 完全填充的矩形
        ctx.fillStyle = 'rgb(102, 204, 0)';
        ctx.fillRect(8, 55, 342, 190);
    }
    // 可以继续添加更多温度对应的绘制逻辑
}

额外提醒 #

• 记得替换代码里的"你的请求URL"为实际的HTTP请求地址
• 如果返回的是字符串（比如'1'、'5'），parseFloat可以正常转换成数字，没问题
• 封装绘制函数后，后续添加更多温度对应的绘制逻辑会更方便

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