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; },
相关推荐
ITxiaobaibai 2020-07-04
alanlonglong 2020-06-14
PeterHuang0 2020-05-26
飞翔的鱼 2019-11-16
yyHaker 2019-10-21
yangzzguang 2019-10-21
追逐阳光的风 2019-06-13
chenzhx 2019-09-06
我心飞翔之家 2019-04-01
咸鱼的星空 2018-09-25
那年夏天 2019-06-30
js网页特效 2019-06-28
zgwyfz 2018-09-25
hotbillow 2013-12-04
有心就有方向 2013-11-07
hexiankun 2016-02-03
kwenLee 2011-06-09
mianqiang 2010-05-16