如何让同一页面多个动态生成的canvas元素都支持绘图功能

问题根因 #

• 你的HTML中通过循环生成了重复的id属性：所有canvas的id都是can，所有输入框的id都是draw_image，而DOM的getElementById方法只会返回匹配到的第一个元素，所以默认只能操作第一个canvas。
• 现有JS代码使用全局变量存储绘图上下文、坐标、绘制状态等信息，所有canvas共享同一套状态，无法独立维护各自的绘制进度。
• 多个canvas使用了完全相同的定位样式，会完全重叠，即使功能正常也无法操作被遮挡的canvas。

修复方案 #

第一步：修改页面结构 #

调整循环逻辑，给每个canvas和对应输入框生成唯一标识，同时用class标记同类元素方便批量选择，调整定位避免重叠：

<body onload="init()">
@foreach($imageDrawing as $draw)
    {{$draw->id}}
    <!-- 用动态id+class标记canvas，存储对应的输入框id -->
    <canvas 
        id="can_{{$draw->id}}" 
        class="draw-canvas"
        data-input-id="draw_image_{{$draw->id}}"
        width="1200" 
        height="400" 
        <!-- 按循环序号偏移top值，避免canvas完全重叠 -->
        style="position:absolute;top:{{10 + $loop->index * 50}}%;left:10%;border:2px solid;"
    >
    </canvas>
    <!-- 输入框id动态生成 -->
    <input 
        type="text" 
        name="imgage_{{$draw->id}}"
        id="draw_image_{{$draw->id}}"
    >
@endforeach
</body>

第二步：重写JS逻辑，为每个canvas独立绑定状态和事件 #

不再使用全局变量存储绘制状态，遍历所有canvas，为每个实例单独维护上下文、坐标、绘制状态等信息：

<script type="text/javascript">
// 公共绘图配置
const drawConfig = {
    lineColor: "red",
    lineWidth: 2,
    baseImgSrc: "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189"
}

function init() {
    // 获取所有可绘制canvas
    const allCanvas = document.querySelectorAll('.draw-canvas');
    // 遍历每个canvas单独初始化
    allCanvas.forEach(canvas => {
        // 每个canvas独立维护私有状态
        const ctx = canvas.getContext("2d");
        let flag = false, prevX = 0, currX = 0, prevY = 0, currY = 0, dot_flag = false;
        const targetInput = document.getElementById(canvas.dataset.inputId);
        
        // 加载当前canvas底图
        const base_image = new Image();
        base_image.crossOrigin = "anonymous"
        base_image.src = drawConfig.baseImgSrc;
        base_image.onload = function(){
            ctx.drawImage(base_image, 0, 0,800,400);
        };

        // 为当前canvas绑定专属事件
        canvas.addEventListener("mousemove", function (e){
            findxy('move', e)
            targetInput.value = canvas.toDataURL()
        }, false);
        canvas.addEventListener("mousedown", function (e) {
            findxy('down', e)
        }, false);
        canvas.addEventListener("mouseup", function (e) {
            findxy('up', e)
        }, false);
        canvas.addEventListener("mouseout", function (e) {
            findxy('out', e)
        }, false);

        // 私有绘图方法
        function draw() {
            ctx.beginPath();
            ctx.moveTo(prevX, prevY);
            ctx.lineTo(currX, currY);
            ctx.strokeStyle = drawConfig.lineColor;
            ctx.lineWidth = drawConfig.lineWidth;
            ctx.stroke();
            ctx.closePath();
        }

        // 私有坐标计算方法
        function findxy(res, e) {
            if (res == 'down') {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.getBoundingClientRect().left;
                currY = e.clientY - canvas.getBoundingClientRect().top;

                flag = true;
                dot_flag = true;
                if (dot_flag) {
                    ctx.beginPath();
                    ctx.fillStyle = drawConfig.lineColor;
                    ctx.fillRect(currX, currY, 2, 2);
                    ctx.closePath();
                    dot_flag = false;
                }
            }
            if (res == 'up' || res == "out") {
                flag = false;
            }
            if (res == 'move') {
                if (flag) {
                    prevX = currX;
                    prevY = currY;
                    currX = e.clientX - canvas.getBoundingClientRect().left;
                    currY = e.clientY -canvas.getBoundingClientRect().top;
                    draw();
                }
            }
        }
    })
}
</script>

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