canvas画布合成

  <canvas id="canvas1" style="background-color: white;"></canvas>

    <canvas id="canvas2" style="background-color: white;"></canvas>

    <canvas id="canvas3" style="background-color: white;"></canvas>

    <canvas id="canvas4" style="background-color: white;"></canvas>

    <script>

        init("canvas1",1);

        init("canvas2",2);

        init("canvas3",3);

        init("canvas4",4);

        function init(name,x){

            let canvas = document.getElementById(name);

            canvas.width = 300;

            canvas.height = 300;

            let g2d=canvas.getContext('2d');

            g2d.fillStyle='#ccc'

            g2d.fillRect((x*50),(x*50),50,50);

        }

        const canvasList = document.getElementsByTagName("canvas")

        const newCanvas = document.createElement('canvas')

        let size=[500,500]

        newCanvas.width = size[0]

        newCanvas.height = size[1]

        const context = newCanvas.getContext('2d')

        for(let i=0;i<canvasList.length;i++){

            let item=canvasList[i];

            context.drawImage(item, 0, 0, size[0], size[1])

        }

        document.body.appendChild(newCanvas)

        const exportPdfImg = { url: newCanvas.toDataURL('image/png'), imageWidthHeightRatio: size[1] / size[0] }

 

    </script>