详解html5 canvas 微信海报分享（个人爬坑）

var imgWidth = 2 * circleR;//图片按圆形大小
var img = new Image();
img.crossOrigin = '';
img.src = this.userImg;
img.onload = function () {
ctx.save(); // 保存当前ctx的状态
ctx.arc(circleX, circleY, circleR, 0, 2 * Math.PI); //画出圆
ctx.clip(); //裁剪上面的圆形
ctx.drawImage(img, imgX, imgY, imgWidth, imgWidth); // 在刚刚裁剪的园上画图
ctx.restore(); // 还原状态
vm.canvasFillText(canvas, ctx, dpr, circleR);
}
},

在canvas中画文字

// 填写用户称呢或者用户留言
canvasFillText (canvas, ctx, dpr, circleR) {
var fontSizeThis = dpr * 20 + 'px' + ' Arial';
var userNameY = 0;//用户名Y轴坐标
var userMessageX = dpr * 40;//用户留言X轴坐标
var userMessageY = 0;//用户留言Y轴坐标
var lastSubStrIndex = 0;//字符串下标
var lineWidth = 0;//一行宽度
var allTextWidth = 0;//所有字符宽度
ctx.font = fontSizeThis;
// 需要用户名是写入用户名
if (this.userName) {
userNameY = circleR * 2.5;
ctx.fillStyle = "#0094ff";
ctx.textAlign = 'center';
ctx.fillText(this.userName, canvas.width / 2, userNameY);
}
if (this.userMessage) {
userMessageY = userNameY + dpr * 35;
ctx.fillStyle = "#000";
// 获取字符宽度
for (var i = 0; i < this.userMessage.length; i++) {
allTextWidth += ctx.measureText(this.userMessage[i]).width;
}
// 字符串长度大于画布区域要换行
if (allTextWidth > canvas.width - 2* userMessageX) {
for (var i = 0; i < this.userMessage.length; i++) {
lineWidth += ctx.measureText(this.userMessage[i]).width;
if (lineWidth > canvas.width - 2*userMessageX) {
ctx.textAlign = 'left';
ctx.fillText(this.userMessage.substring(lastSubStrIndex, i), userMessageX, userMessageY);
userMessageY += dpr * 25;//设置行高
lineWidth = 0;
lastSubStrIndex = i;
}
if (i == this.userMessage.length - 1) {
ctx.fillText(this.userMessage.substring(lastSubStrIndex, i + 1), userMessageX, userMessageY);
}
}
} else {
// 小于者居中显示
ctx.textAlign = 'center';
ctx.fillText(this.userMessage, canvas.width / 2, userMessageY);
}
}
this.convertCanvasToImage(canvas);
},