文本生成图片,用于动态文字作为模型贴图

可复制:

// 创建文本图片// 支持 文字设置大小 字体 颜色 是否3D显示// 支持 图片透明度 文字所处图片位置 最小图片设置等function createTextCanvas(    text,     fontOptions = {font: "20px sans-serif", color: "red", backgroud: "rgba(255, 255, 255, 0.1)"},     minImgWidht = null,     paddingOptions = {top: 100, right: 0, bottom: 0, left: 20},    is3D = true) {        // 创建画布        let canvas = document.createElement('canvas');        // 绘制文字环境        let context = canvas.getContext('2d');        // 设置字体        context.font = fontOptions.font;                // 获取字体宽度        let width = context.measureText(text).width;        if(typeof(minImgWidht) == 'number' && width < minImgWidht) {            width = minImgWidht;        }        width += paddingOptions.left + paddingOptions.right;        // 获取字体高度        let height = context.measureText(text).fontBoundingBoxAscent             + context.measureText(text).fontBoundingBoxDescent            + paddingOptions.top + paddingOptions.bottom;        // 画布宽度        canvas.width = width;        // 画布高度        canvas.height = height;        // 填充背景        context.fillStyle = fontOptions.backgroud;        // 绘制背景大小        context.fillRect(0, 0, canvas.width, canvas.height);        // 设置字体        context.font = fontOptions.font;        // 设置字体颜色        context.fillStyle = fontOptions.color;        if(is3D) {            var n;            //绘制底层            for (n=0; n<2; n++)            {                context.fillText(text,Math.abs(paddingOptions.left)-n,Math.abs(parseInt(fontOptions.font) + paddingOptions.top)-n);            }            context.shadowColor="black";            context.shadowBlur=1;            context.shadowOffsetX=1;            context.shadowOffsetY=0;        }                // 没有填写坐标则默认居中输出        if(paddingOptions.top == 0             && paddingOptions.right == 0             &&  paddingOptions.bottom == 0             && paddingOptions.left == 0) {            // 设置水平对齐方式            context.textAlign = 'center';            // 设置垂直对齐方式            context.textBaseline = 'middle';            // 填充文字(参数:要写的字,x坐标,y坐标)            context.fillText(text, canvas.width/2, canvas.height/2);        }        else {            // 填充文字(参数:要写的字,x坐标,y坐标)            context.fillText(text, Math.abs(paddingOptions.left),                 Math.abs(parseInt(fontOptions.font) + paddingOptions.top));        }        // 生成图片信息        // return canvas.toDataURL('image/png'); // 图资源        return canvas; // canvas资源}

你可能感兴趣的:(文本生成图片,用于动态文字作为模型贴图)