Javascript:Canvas绘图（两个相同的文件，结果不同）

所以，我现在正在阅读我的javascript书，其中有一个画布绘制的小例子。我从书中复制了代码，但画布保持白色

然后我继续下载作者的书中所有脚本的集合，用他的代码，它出人意料地工作

对我来说，这两个代码看起来完全相同，唯一不同的是我使用了 “”用于作者使用“”时的字符串

这是我的代码：

function init() {
    let canvas = document.getElementById("canvas");
    canvas.addEventListener("mousemove", handleMouseMove, false);
    let context = canvas.getContext("2d");
    let started = false;

    function handleMouseMove(e) {
        let x, y;
        if (e.clientX || e.clientX == 0) {
            x = e.clientX;
            y = e.ClientY;
        }
        if (!started) {
            context.beginPath();
            context.moveTo(x, y);
            started = true;
        } else {
            context.lineTo(x, y);
            context.stroke();
        }
    }

}

document.addEventListener("DOMContentLoaded", init);

这是作者的代码：

function init() {
    let canvas = document.getElementById('canvas');
    canvas.addEventListener('mousemove', handleMouseMove, false);
    let context = canvas.getContext('2d');
    let started = false;
    function handleMouseMove(e) {
        let x, y;
        if (e.clientX
            || e.clientX == 0) {
            x = e.clientX;
            y = e.clientY;
        }
        if (!started) {
            context.beginPath();
            context.moveTo(x, y);
            started = true;
        } else {
            context.lineTo(x, y);
            context.stroke();
        }
    }

}

document.addEventListener('DOMContentLoaded', init);

---

您在

handleMouseMove

功能中有一个小问题。你写

y = e.ClientY;

但是

e.ClientY

不存在，它应该是：

y = e.clientY;

---

它们不完全相同，例如，您有

y=e.ClientY

，应该是

y=e.clientY。（小写C）哦，天哪，我一点也没看到。非常感谢你。