码迷,mamicode.com
首页 > Web开发 > 详细

js 利用canvas 生成文字图片

时间:2020-01-06 11:14:20      阅读:744      评论:0      收藏:0      [点我收藏+]

标签:enter   获取   字体   文字   element   创建   bsp   水平对齐   div   

// 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;
    },

 

js 利用canvas 生成文字图片

标签:enter   获取   字体   文字   element   创建   bsp   水平对齐   div   

原文地址:https://www.cnblogs.com/CaktyRiven/p/12155277.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!