用户名第一个字符设置为默认头像

基础实现方法

//html
<canvas style="background: pink;"></canvas>
//js
let haha = "haha";
let canvas = document.querySelector("canvas");
let oCtx = canvas.getContext("2d");
canvas.width = 40;
canvas.height = 40;
let str = haha.substring(0, 1).toUpperCase();
oCtx.font = "30px 微软雅黑";
oCtx.textBaseline = "middle"
oCtx.textAlign = "center";
oCtx.fillText(str, canvas.width / 2, canvas.height/ 2);
let dataURL = canvas.toDataURL();
console.log(dataURL);

这样会得到图片连接

但是到这里会发现两个问题
1.文字不是垂直居中的
2.通过连接得到的图片没有背景图片

问题解决

1. 垂直居中：

将填充文字的位置修改一下

let textMetrics = oCtx.measureText(str);
let actualBoundingBoxDescent = textMetrics.actualBoundingBoxDescent;
oCtx.fillText(str, canvas.width / 2, (canvas.height + actualBoundingBoxDescent) / 2);
// oCtx.fillText(str, canvas.width / 2, canvas.height/ 2);

2. 在填充文字前面添加加上以下的代码：

oCtx.fillStyle = "pink";
oCtx.fillRect(0, 0, canvas.width, canvas.height);
oCtx.fillStyle = "#fff";    //这行是文字的颜色，不加这样的话，文字会看不出来

最终实现

<canvas></canvas>
<script>
    let haha = "haha";
    let canvas = document.querySelector("canvas");
    let oCtx = canvas.getContext("2d");
    canvas.width = 40;
    canvas.height = 40;
    oCtx.fillStyle = "pink";
    oCtx.fillRect(0, 0, canvas.width, canvas.height);
    oCtx.fillStyle = "#fff";
    let str = haha.substring(0, 1).toUpperCase();
    oCtx.font = "30px 微软雅黑";
    // 设置对其方式
    oCtx.textBaseline = "middle"
    oCtx.textAlign = "center";
    let textMetrics = oCtx.measureText(str);
    let actualBoundingBoxDescent = textMetrics.actualBoundingBoxDescent;
    oCtx.fillText(str, canvas.width / 2, (canvas.height + actualBoundingBoxDescent) / 2);
    let dataURL = canvas.toDataURL('image/jpeg', 0.6);
    console.log(dataURL); 
</script>

如有疑问或补充请提出来。
转载请附上链接，谢谢