canvas 生成标签

cesium加载label文字模糊的问题解决 - samkallon的博客

async getBillbordCanvas({
        img,
        ratio,
        width,
        height,
        text,
        textFontSize = '10pt',
        textPositionX = width / 10 + 27,
        textPositionY = height / 2
    }) {
        return new Promise(resolve => {
            const canvas = document.createElement("canvas"); //创建canvas标签
            const ctx = canvas.getContext("2d");

            canvas.style.opacity = 1;
            canvas.width = width * ratio;
            canvas.height = height * ratio;

            //然后将画布缩放，将图像放大ratio倍画到画布上 目的 使图片文字更加清晰
            ctx.scale(ratio, ratio);
            const image = new Image();
            image.src = img;
            // 图片创建是异步操作，需要在图片完成之后，再写入文字，能保证文字在图片上方。
            // 如果不在里面，会出现图片覆盖文字
            image.onload = function () {
                ctx.drawImage(image, 0, 0, width, height);
                // 名称文字
                ctx.font = `bold ${textFontSize} YouSheBiaoTiHei`;
                const gradient = ctx.createLinearGradient(0, 5, 0, canvas.height - 45);
                gradient.addColorStop(0, "#FFFFFF");
                gradient.addColorStop(1, "#ffffff");
                ctx.fillStyle = gradient;
                ctx.fillText(text, textPositionX, textPositionY);
                resolve(canvas)
            };
        })
    }