uni-app绘制印章

使用uni-app绘制印章功能还是比较冷门的，但这种需求是存在的，当时做的时候也很麻瓜，不知道怎么下手，后续也是找到了正确的方法，刚好接着博客分享给大家。

使用

/*
* 注意canvas必须放到最外层，放到内部组件逻辑执行但canvas会是空
* 官方的解释是：
  canvas必须一进来就要挂载，这样他才能绘制，感觉应该是有什么技术壁垒
*/
<canvas canvas-id="disId" class="canvas" v-show="tabIndex === 0"/>
import { CanvasYinzhang } from './components/Certificate/util.js'
// 传入参数：canvasid  companyName: 公司名称
CanvasYinzhang('disId', 'xxxx股份有限公司');

封装方法

export function create5star (cxt, sx, sy, radius, color, rotato) {
	cxt.save();
	cxt.setFillStyle(color);
	cxt.translate(100, 100);
	cxt.beginPath();
	var dig = Math.PI / 5 * 4;
	for (var i = 0; i < 5; i++) {//画五角星的五条边
		var x = Math.sin(i * dig);
		var y = Math.cos(i * dig);
		cxt.lineTo(x * radius, y * radius);
	}
	cxt.closePath();
	cxt.stroke();
	cxt.fill();
	cxt.restore();
}
export function CanvasYinzhang(canvasId, companyName){
	var context = uni.createCanvasContext(canvasId);
	var text = "";
	context.setLineCap('round');//设置线两端端点样式更加圆润
	context.setLineJoin('round');//设置两条线连接处更加圆润
	context.setStrokeStyle("#ff0000");//设置线的颜色
	context.setLineWidth(3);//设置线条的宽度
	context.moveTo(190, 100);
	context.arc(100, 100, 90, 0, Math.PI * 2);//宽、高、半径
	context.stroke();
	// 绘制五角星
	create5star(context, 100, 100, 25, "#f00", 0);
	context.setFontSize('19');
	context.setTextBaseline('middle');
	context.setTextAlign('center');
	context.setLineWidth(2);
	context.setFillStyle('#f00');
	// context.strokeText(text, 100, 140);
	// 绘制印章单位
	context.translate(100,100);
	// context.font = '20px 黑体';
	var count = companyName.length;
	var angle = 4 * Math.PI / (3 * (count - 1));
	var chars = companyName.split("");
	var c;
	for (var i = 0; i < count; i++) {
		c = chars[i];
		if (i == 0) {
			context.rotate(5 * Math.PI / 6);
		} else{
			context.rotate(angle);
		}
		context.save();
		context.translate(70, 0);
		context.rotate(Math.PI / 2)
		context.setFillStyle("#ff0000");
		context.fillText(c, 0, 0);
		context.restore();
	}
	setTimeout(() => {
		context.draw();
	}, 200);
}