开发NES风格塞尔达类游戏：Canvas清除失败，角色移动留轨迹

核心问题分析与修复 #

1. fillRect报错的原因 #

你的update方法存在两个低级错误：

• fillstyle拼写错误，Canvas API要求使用驼峰式命名**fillStyle**
• rgba(225,225,225,0)需要以字符串形式赋值，否则JavaScript会将其视为未定义的函数调用，直接抛出rgba is not defined错误

修复后的update方法：

update(){
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "rgba(225, 225, 225, 0)";
    ctx.fillRect(0, 0, c.width, c.height);  
    console.log("cleared screen");
}

2. clearRect无效的原因 #

使用clearRect没效果，本质是draw方法未调用beginPath()，导致每次绘制都会累加历史路径，执行stroke()时会把所有旧路径重新画一遍，视觉上看起来像没清屏。

修复后的draw方法：

draw(){
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    // 每次绘制前开启新路径，避免路径累加
    ctx.beginPath();
    ctx.moveTo(this.hero.position.x,this.hero.position.y);
    ctx.lineTo(this.hero.position.x + 10, this.hero.position.y);
    ctx.lineTo(this.hero.position.x + 10, this.hero.position.y + 10);
    ctx.lineTo(this.hero.position.x, this.hero.position.y + 10);
    ctx.lineTo(this.hero.position.x,this.hero.position.y);
    ctx.stroke();
    console.log(this.hero.position.x, this.hero.position.y)
}

3. 更简洁的清屏方式 #

其实clearRect是最直接的清屏方案，无需设置透明色填充，直接替换update方法内容即可：

update(){
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    ctx.clearRect(0, 0, c.width, c.height);  
    console.log("cleared screen");
}

4. 额外性能优化 #

避免每次方法调用重复获取canvas和上下文对象，可在类的构造函数中初始化一次：

class c_ui {
    constructor() {
        this.c = document.getElementById("canvas");
        this.ctx = this.c.getContext("2d");
        this.hero = { position: { x: 0, y: 0 } };
    }

    draw(){
        this.ctx.beginPath();
        this.ctx.moveTo(this.hero.position.x,this.hero.position.y);
        this.ctx.lineTo(this.hero.position.x + 10, this.hero.position.y);
        this.ctx.lineTo(this.hero.position.x + 10, this.hero.position.y + 10);
        this.ctx.lineTo(this.hero.position.x, this.hero.position.y + 10);
        this.ctx.lineTo(this.hero.position.x,this.hero.position.y);
        this.ctx.stroke();
        console.log(this.hero.position.x, this.hero.position.y)
    }

    update(){
        this.ctx.clearRect(0, 0, this.c.width, this.c.height);  
        console.log("cleared screen");
    }
}

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