Javascript：画布绘图（2 个相同的文件，结果不同）

Question

所以，我现在正在浏览我的 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);

Answer 1

handleMouseMove 函数有一点问题。你写

y = e.ClientY;

但是e.ClientY不存在，应该是：

y = e.clientY;