使用方式

const drawEngine = new DrawEngine("canvas");

drawEngine.setConfig({
    width: "{{canvas.width}}",
    height: "{{canvas.height}}",
    items: [
        {
            draw_type: "text",

            text_data: {
                text: "{{text.val}}",
                x: "{{text.x}}",
                y: "{{text.y}}",
                align: "right_bottom",
                font_path:
                    "https://fonts.cdnfonts.com/s/105275/TrickOrDead-8MoDZ.woff",
                font_size: 100,
                color: [107, 226, 0, 255],
            },
        },
        {
            draw_type: "text",

            text_data: {
                text: "{{text2.val}}",
                x: "{{text2.x}}",
                y: "{{text2.y}}",
                align: "center",
                font_path:
                    "https://fonts.cdnfonts.com/s/19870/HussarSzturm.woff",
                font_size: 50,
                color: [0, 0, 0, 255],
            },
        },
        {
            draw_type: "rectangle",
            rectangle_data: {
                x: "{{rectangle.x}}",
                y: "{{rectangle.y}}",
                w: 300,
                h: "230",
                draw_location: "auto",
                target_quantity: "multiple",
                target_expr: "{{rectangle.list}}",

                line_width: 2,
                border_color: [0, 0, 255, 1],

                fill_type: "solid_color",
                fill_color: [0, 0, 0, 0.5],

                linear_gradient_data: {
                    linear_gradient: {
                        x0: 50,
                        y0: 0,
                        x1: 50,
                        y1: 100,
                    },
                    color_stop: [
                        { offset: 0, r: 237, g: 35, b: 14, a: 0.5 },
                        { offset: 37, r: 237, g: 187, b: 14, a: 0.5 },
                        { offset: 68, r: 16, g: 198, b: 106, a: 0.5 },
                        { offset: 100, r: 18, g: 186, b: 176, a: 0.5 },
                    ],
                },
            },
        },
    ],
});

requestAnimationFrame(function loop() {
    drawEngine
        .setData(
            JSON.stringify({
                canvas: {
                    width: 600,
                    height: 600,
                },
                rectangle: {
                    x: 1000,
                    y: 600,

                    list: [
                        {
                            x: 100,
                            y: 100,
                        },
                        {
                            x: 200,
                            y: 200,
                        },
                        // 随机生成
                        {
                            x: 300,
                            y: 300,
                            w: Math.random() * 200,
                            h: Math.random() * 200,
                        },
                    ],
                },
                text: {
                    val: "CDNFonts",
                    x: 0,
                    y: 0,
                },
                text2: {
                    val: "CDNFonts",
                    x: 300,
                    y: 300,
                },
            })
        )
        .draw();
    requestAnimationFrame(loop);
});