Paper.js项目报错：raster.on is not a function，请求技术协助

问题根源分析 #

1. 事件绑定API变更：新版Paper.js已移除raster.on()方法，需改用构造函数参数传入onLoad回调，或通过addEventListener绑定事件。
2. Canvas ID不匹配：代码中paper.setup('canvas')绑定的画布ID为canvas，但后续获取的是ID为myCanvas的元素，两者不一致导致Paper.js无法正确关联画布。
3. 初始化顺序错误：paper.setup应在DOM加载完成后执行，原代码提前执行可能导致找不到画布元素。

修正步骤 #

• 将paper.setup移至window.onload回调内，确保DOM加载完成后再初始化Paper.js。
• 统一Canvas的ID为同一个值（示例中统一为myCanvas）。
• 替换raster.on('load', ...)为构造函数内的onLoad选项，或使用raster.addEventListener('load', ...)。

修正后的完整代码 #

/*Paper JS Setup */
/* ====================== *
 *  0. Initiate Canvas    *
 * ====================== */
 
// expose paperjs classes into global scope
paper.install(window);
 
// Only execute code once the DOM is ready.
window.onload = function() {
    // Get a reference to the canvas object and bind paper to it
    var canvas = document.getElementById('myCanvas');
    paper.setup(canvas);

    // Create a raster item using the image tag with id='mona'
    var raster = new Raster({
        source: 'mona',
        visible: false,
        onLoad: function() {
            // Downsize the raster
            raster.size = new Size(40, 30);

            // Grid settings
            var gridSize = 12;
            var spacing = 1.2;

            for (var y = 0; y < raster.height; y++) {
                for(var x = 0; x < raster.width; x++) {
                    // Get pixel color
                    var color = raster.getPixel(x, y);

                    // Create circle path
                    var path = new Path.Circle({
                        center: new Point(x, y) * gridSize,
                        radius: gridSize / 2 / spacing,
                        fillColor: 'black'
                    });

                    // Scale path based on pixel gray value
                    path.scale(1 - color.gray);
                }
            }

            // Center the layer
            project.activeLayer.position = view.center;
        }
    });
}

额外说明 #

• 确保HTML中存在ID为myCanvas的canvas元素，以及ID为mona的img元素（且图片路径正确）。
• 如果仍无输出，检查浏览器控制台是否有其他错误，比如图片加载失败（跨域或路径错误）。

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