P5.js多画布加载图片渲染报错：Identifier 'sketch'已声明

错误原因 #

你遇到的Uncaught SyntaxError: Identifier 'sketch' has already been declared错误，是因为在创建多个P5.js画布实例时，重复使用了同一个变量名sketch来声明实例——JavaScript不允许同一作用域内重复声明同名变量。

修正后的完整代码 #

HTML结构 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>P5.js 多画布图片栅格化</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
</head>
<body>
    <!-- 两个容器分别承载不同画布 -->
    <div id="canvas-box-1"></div>
    <div id="canvas-box-2"></div>
</body>
</html>

P5.js 实例模式脚本 #

// 第一张图片的栅格化画布实例
let sketch1 = function(p) {
    let img;

    p.preload = function() {
        img = p.loadImage('your-first-image-path.jpg'); // 替换为你的第一张图片路径
    };

    p.setup = function() {
        let canvas = p.createCanvas(400, 400);
        canvas.parent('canvas-box-1');
        p.pixelDensity(1);
        img.resize(400, 400); // 适配画布尺寸
    };

    p.draw = function() {
        p.background(255);
        img.loadPixels();
        
        // 栅格大小，可按需调整
        let gridSize = 10;

        // 遍历像素绘制栅格
        for (let y = 0; y < img.height; y += gridSize) {
            for (let x = 0; x < img.width; x += gridSize) {
                let pixelIndex = (x + y * img.width) * 4;
                let r = img.pixels[pixelIndex];
                let g = img.pixels[pixelIndex + 1];
                let b = img.pixels[pixelIndex + 2];
                
                p.fill(r, g, b);
                p.noStroke();
                p.rect(x, y, gridSize, gridSize);
            }
        }
        p.noLoop(); // 只渲染一次，避免重复计算
    };
};

// 第二张图片的栅格化画布实例
let sketch2 = function(p) {
    let img;

    p.preload = function() {
        img = p.loadImage('your-second-image-path.jpg'); // 替换为你的第二张图片路径
    };

    p.setup = function() {
        let canvas = p.createCanvas(400, 400);
        canvas.parent('canvas-box-2');
        p.pixelDensity(1);
        img.resize(400, 400); // 适配画布尺寸
    };

    p.draw = function() {
        p.background(255);
        img.loadPixels();
        
        // 栅格大小，可按需调整
        let gridSize = 10;

        // 遍历像素绘制栅格
        for (let y = 0; y < img.height; y += gridSize) {
            for (let x = 0; x < img.width; x += gridSize) {
                let pixelIndex = (x + y * img.width) * 4;
                let r = img.pixels[pixelIndex];
                let g = img.pixels[pixelIndex + 1];
                let b = img.pixels[pixelIndex + 2];
                
                p.fill(r, g, b);
                p.noStroke();
                p.rect(x, y, gridSize, gridSize);
            }
        }
        p.noLoop(); // 只渲染一次，避免重复计算
    };
};

// 初始化两个独立的P5实例
new p5(sketch1);
new p5(sketch2);

关键修改说明 #

• 避免变量重复：将两个画布实例分别命名为sketch1和sketch2，代替重复的sketch变量
• 实例模式隔离作用域：每个P5实例拥有独立的作用域，不会出现全局变量冲突，同时通过parent()方法将画布挂载到指定HTML容器
• 栅格化逻辑：遍历图片像素，取每个网格区域左上角的像素颜色绘制矩形，实现栅格化效果；noLoop()确保只渲染一次，提升性能

注意事项 #

• 替换代码中的图片路径为实际本地路径或在线图片URL
• 确保图片与HTML文件同源，开发环境可使用本地服务器（如Live Server）避免跨域问题
• 可调整gridSize参数改变栅格粗细，修改createCanvas的尺寸适配图片比例

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