小程序canvas小技巧

1.绘制圆形头像

ctx.beginPath();
ctx.arc(80, 550, 40, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(_this.AvatarTempFilePath, 40,510, 80, 80);
ctx.restore();
ctx.save();

2.文本截取不换行...

/**
			 * 文本截取不换行...
			 * @param {Object} ctx
			 * @param {String} text
			 * @param {Number} fontSize
			 * @param {Number} maxWidth
			 * @return {String} newStr
			 */
			cutText:function(ctx,text,fontSize,maxWidth){
				ctx.setFontSize(fontSize)
				let arrText = text.split('');
				let line = '';
				if(ctx.measureText(text).width <= maxWidth){
					return text;
				}
				for (let i = 0; i < arrText.length; i++) {
					line += arrText[i];
					let metrics = ctx.measureText(line);
					let width = metrics.width;
					if(width>=maxWidth){
						return line +'...';
					}
				}
			},

3.获取文本折行兼容/n换行

/**
			 * 获取文本折行兼容/n换行
			 * @param {Object} ctx
			 * @param {String} text
			 * @param {Number} fontSize
			 * @param {Number} maxWidth
			 * @return {Array} arrTr
			 */
			getTextLine: function(ctx,text,fontSize,maxWidth){
					ctx.setFontSize(fontSize)
			    let arrText = text.split('');
			    let line = '';
			    let arrTr = [];
					if((ctx.measureText(text).width <= maxWidth)&&(text.indexOf('/n')==-1)){
						arrTr.push(text)
						return arrTr;
					}
			    for (let i = 0; i < arrText.length; i++) {
						line += arrText[i];
						let metrics = this.ctx.measureText(line);
						let width = metrics.width;
						
						if((width>=maxWidth && i>0) || (i == arrText.length - 1) ){
							arrTr.push(line);
							line = ''
						}
						if(arrText[i]=='/'&&arrText[i+1]=='n'){
							i+=1
							line =line.substr(0,line.length-1)
							arrTr.push(line);
							arrTr.push('');//换行
							line = ''
						}
						
			    }
			    return arrTr;
			},

4.绘制圆角矩形

/**
			 * 绘制圆角矩形
			 * @param {Object} ctx
			 * @param {String} x
			 * @param {Number} y
			 * @param {Number} w
			 * @return {Array} h
			 * @return {Array} r
			 */
			roundRect: function(ctx, x, y, w, h, r) {
			  // 开始绘制
			  ctx.beginPath()
			  // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
			  // 这里是使用 fill 还是 stroke都可以，二选一即可
			  ctx.setFillStyle('transparent')
			  // ctx.setStrokeStyle('transparent')
			  // 左上角
			  ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
			
			  // border-top
			  ctx.moveTo(x + r, y)
			  ctx.lineTo(x + w - r, y)
			  ctx.lineTo(x + w, y + r)
			  // 右上角
			  ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
			
			  // border-right
			  ctx.lineTo(x + w, y + h - r)
			  ctx.lineTo(x + w - r, y + h)
			  // 右下角
			  ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
			
			  // border-bottom
			  ctx.lineTo(x + r, y + h)
			  ctx.lineTo(x, y + h - r)
			  // 左下角
			  ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
			
			  // border-left
			  ctx.lineTo(x, y + r)
			  ctx.lineTo(x + r, y)
			
			  // 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应
				ctx.setFillStyle('#ffffff')
			  ctx.fill()
			  // ctx.stroke()
			  ctx.closePath()
			  // 剪切
			  ctx.clip()
				//退出
				ctx.restore()
			},