点击按钮Canvas宽高未变更求助：期望每次点击各增1px

DevOps 小满

2026-5-15

问题原因分析与修复方案

你的代码无法实现Canvas宽高增加的核心问题是jQuery选择器使用错误，另外还有几个小细节可以优化，下面我来逐一拆解：

1. 最关键的错误：选择器缺少ID前缀`#`

你在代码中多次使用$('myCanvas')来选中canvas元素，但你的canvas标签的id是myCanvas，jQuery中选择ID元素必须以#开头，正确的写法是$('#myCanvas')。没有#的话，jQuery会去寻找名为<myCanvas>的HTML标签，而不是id为myCanvas的元素，所以所有的样式修改都没有作用到目标canvas上。

2. 次要优化点

变量命名：你用fontSize、fontSize1来存储canvas的宽高，这会让人混淆，建议改成canvasHeight、canvasWidth，可读性更强。
parseInt建议添加进制参数：parseInt(value, 10)可以避免某些情况下的进制解析错误（比如值以0开头时会被当作八进制）。

修复后的完整代码

JavaScript部分

$("#myButton").click(function() {
    console.log("Hello");
    // 修正选择器，同时优化变量名和parseInt用法
    var canvasHeight = parseInt($('#myCanvas').css("height"), 10);
    var canvasWidth = parseInt($('#myCanvas').css("width"), 10);
    console.log(canvasHeight + " " + canvasWidth);
    canvasHeight = canvasHeight + 1 + "px";
    canvasWidth = canvasWidth + 1 + "px";
    $('#myCanvas').css({'height': canvasHeight});
    $('#myCanvas').css({'width': canvasWidth});
});