基础实现方法
//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.通过连接得到的图片没有背景图片
问题解决
- 垂直居中:
将填充文字的位置修改一下
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);
- 在填充文字前面添加加上以下的代码:
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>
如有疑问或补充请提出来。
转载请附上链接,谢谢