Question

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

然后我继续下载了本书所示的所有脚本的作者集合，并使用他的代码，令人惊讶地工作。

对我来说，两个代码看起来都相同，唯一不同的是我使用的代码＆＃34; ＆＃34;对于字符串，而作者使用＆＃39; ＆＃39;

这是我的代码：

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;

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

1 个答案: