JavaScript Canvas绘制随机线条报错但仍运行的问题求助

问题根源 #

• 初始化路径时错误使用x/y属性，但构造函数referencePoint里定义的是startX/startY，导致起点未正确设置
• 定时器里数组长度拼写错误：progressPoints.lenght应为progressPoints.length，导致计数器超出数组范围后仍执行，取到undefined元素触发startX/startY读取错误
• 改成x/y后线条不显示，是因为构造函数未定义这两个属性，属性名不匹配

修复后的完整代码 #

var sandbox = document.getElementById('sandbox');
ctx = sandbox.getContext('2d');
// 统一属性名，保持调用处与构造函数一致即可
var referencePoint = function(x, y) {
    this.x = x;
    this.y = y;
};
const progressPoints = [];
for (let i = 0; i < 15; i++) {
    let x = Math.floor(Math.random() * sandbox.width);
    let y = Math.floor(Math.random() * sandbox.height);
    progressPoints.push(new referencePoint(x, y));
};
ctx.strokeStyle = "grey";
// 使用与构造函数匹配的属性名设置起点
ctx.moveTo(progressPoints[0].x, progressPoints[0].y);

var counter = 1,
interval = setInterval(function() {
    var point = progressPoints[counter];
    // 先判断元素是否存在，避免越界报错
    if (!point) {
        clearInterval(interval);
        return;
    }
    // 属性名与构造函数统一
    ctx.lineTo(point.x, point.y);
    ctx.stroke();
    // 修正数组长度拼写错误
    if(counter >= progressPoints.length - 1){
        clearInterval(interval);
    };
    counter++
}, 140);

// 导航切换代码保持不变
(function() {
    var contentBox = $('div.content-box'),
    activeContent = contentBox.find('div.active-content'),
    pageTransitionOverlay = contentBox.find('div.page-transition-overlay'),
    navBtn = $('a.nav-btn'),
    hiddenContent = $('div.hidden-content');
    navBtn.on('click', function(e) {
        var self = $(this),
        moveToActive = hiddenContent.find('div.' + self.data('target-class'));
        contentBox.addClass('transitionEffect');
        pageTransitionOverlay.fadeIn(300, function() {
            self.closest('div.content-wrapper').appendTo(hiddenContent);
            moveToActive.appendTo(activeContent);
            contentBox.removeClass('transitionEffect');
            pageTransitionOverlay.fadeOut(300);
        });
        e.preventDefault();
    });
})();

关键修复点说明 #

• 统一属性名：构造函数和调用处使用相同属性名（比如都用x/y或都用startX/startY），避免属性不存在的错误
• 修正拼写错误：将lenght改为length，确保定时器能正确停止
• 增加越界判断：定时器内先检查元素是否存在，防止数组越界后读取属性报错

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