JS点击变色与图形尺寸问题：调用jQuery后页面空白求助

嘿，作为编程新手遇到这种问题很正常，我帮你排查了代码里的几个关键问题，正是这些问题导致页面空白和点击功能失效：

1. jQuery点击事件的语法错误 #

你写的点击事件代码有两处明显问题：

• color [Math.floor(...)] 里的空格是语法错误，数组访问时方括号和数组名之间不能有空格，应该写成color[Math.floor(...)]
• 点击事件的回调函数没有闭合，缺少});来结束函数定义和jQuery调用，这会直接导致JS解析报错，页面无法正常运行

2. 初始绘制逻辑的问题 #

原代码里posicion和tamano初始值都是0，setInterval循环绘制的是宽高为0的图形，所以一开始页面看起来就是空白的，得给这两个变量设置合理的初始值。

修复后的完整代码 #

我不仅帮你修复了语法错误，还补充了图形尺寸显示的功能，以及切换正方形/矩形的逻辑（点击画布就能切换形状），直接运行就能测试所有需求：

<canvas id="canvas" width="400" height="400"></canvas>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var color = ["Red", "Pink", "SkyBlue", "Grey", "Purple", "Orange"];
// 初始化随机颜色
ctx.fillStyle = color[Math.floor(Math.random() * color.length)];
var posicion = 0;
var tamano = 200; // 设置初始尺寸，避免页面一开始空白
var clicks = 0;
var isSquare = true; // 标记当前图形是否为正方形

// 封装绘制图形的函数，方便复用
function drawCurrentShape() {
    ctx.clearRect(0, 0, 400, 400);
    
    // 根据isSquare状态决定绘制正方形还是矩形
    var shapeWidth = isSquare ? tamano : tamano * 1.5;
    var shapeHeight = isSquare ? tamano : tamano * 0.8;
    
    // 绘制图形（居中显示）
    ctx.fillRect(posicion, (400 - shapeHeight)/2, shapeWidth, shapeHeight);
    
    // 显示图形尺寸
    ctx.fillStyle = "#000"; // 文字设为黑色，避免和图形颜色混淆
    ctx.font = "16px Arial";
    ctx.fillText(`当前尺寸: ${Math.round(shapeWidth)} × ${Math.round(shapeHeight)}`, 10, 30);
    ctx.fillStyle = color[Math.floor(Math.random() * color.length)]; // 恢复图形颜色
    
    // 更新位置和尺寸，实现移动动画
    posicion++;
    tamano += isSquare ? 1 : 0.5;
    if (posicion > 400) {
        posicion = 0;
        tamano = 200;
    }
}

// 启动绘制循环
setInterval(drawCurrentShape, 30);

// 修复后的jQuery点击事件：切换颜色+切换形状
$("canvas").click(function() {
    // 随机切换图形颜色
    ctx.fillStyle = color[Math.floor(Math.random() * color.length)];
    // 切换正方形/矩形状态
    isSquare = !isSquare;
});
</script>

关键修复&优化说明 #

• 修正了jQuery点击事件的语法错误，确保代码能正常解析
• 给tamano设置初始值200，解决了页面初始空白的问题
• 新增isSquare变量控制图形类型，点击画布即可切换正方形/矩形
• 添加了尺寸显示逻辑，用fillText在画布左上角实时展示当前图形的宽高
• 调整了图形绘制位置，让图形始终居中，提升视觉效果

内容的提问来源于stack exchange，提问作者Vanessa Durán