zoukankan      html  css  js  c++  java
  • js 利用canvas 生成文字图片

    // text,需要生成的文字
        // font,字体样式
        drawLogo: function(text, font) {
            // 创建画布
            let canvas = document.createElement('canvas');
            // 绘制文字环境
            let context = canvas.getContext('2d');
            // 设置字体
            context.font = font;
            // 获取字体宽度
            let width = context.measureText(text).width;
            // 如果宽度不够 240
            if (width < 240) {
                width = 240;
            } else {
                width = width + 30;
            }
            // 画布宽度
            canvas.width = width;
            // 画布高度
            canvas.height = width;
            // 填充白色
            context.fillStyle = '#ffffff';
            // 绘制文字之前填充白色
            context.fillRect(0, 0, canvas.width, canvas.height);
            // 设置字体
            context.font = font;
            // 设置水平对齐方式
            context.textAlign = 'center';
            // 设置垂直对齐方式
            context.textBaseline = 'middle';
            // 设置字体颜色
            context.fillStyle = '#000000';
            // 绘制文字(参数:要写的字,x坐标,y坐标)
            context.fillText(text, canvas.width / 2, canvas.height / 2);
            // 生成图片信息
            let dataUrl = canvas.toDataURL('image/png');
            return dataUrl;
        },
  • 相关阅读:
    oracle 存储过程
    交错数组
    延迟加载
    js 闭包
    引用类型和值类型
    事务
    web api 之身份验证
    SQLServer中的服务器角色与数据库角色
    按照某一字段的相同值合并所对应的行的值
    VC工程中的字符集工程属性和字符编码(转)
  • 原文地址:https://www.cnblogs.com/CaktyRiven/p/12155277.html
Copyright © 2011-2022 走看看