微信小程序里的图章制作，听起来像是个小工具，但真要做得好用、能拿出手，背后涉及的知识点比想象中多。很多人做出来的图章要么模糊、要么位置不对、要么字体像贴上去的，根本不像真章。今天咱们就从零开始，把图章制作的每一个细节掰开揉碎讲清楚。

一、图章的核心结构：不是随便画个圆就行

真章和假章最大的区别在于“层次感”。一个标准的圆形公章，从外到内至少包含三层：外圆边框、内部文字、中心图案或五角星。很多人只画一个圆，把文字直接塞进去，结果文字挤在一起，像被压扁的蚂蚁。

实际操作时，建议用Canvas 2D API来绘制，因为小程序里canvas组件性能最好，而且支持文字旋转。先画一个半径为r的外圆，边框宽度设为2px，颜色用朱红（#C41A1A）。然后在内圈留出r-5px的位置画文字轨道，文字不能贴着边框，否则看起来像没盖好。

举个例子：如果你要做一个直径40mm的图章（小程序里通常用px，按1mm≈3px换算，就是120px半径），外圆半径设为120px，文字轨道半径设为105px，中心五角星半径设为30px。这个比例是经过多次测试的，不会显得头重脚轻。

二、文字环绕：最难的一步，用弧度解决

文字环绕圆形是图章制作的重灾区。网上很多教程让你用ctx.translate和ctx.rotate一个个字符旋转，但这样写出来的代码又长又容易错位。更好的办法是使用ctx.arc配合ctx.textAlign和ctx.textBaseline。

具体操作：先计算每个字符占用的弧度。假设你的单位名称是“XX科技有限公司”，一共6个字，要分布在180度（半圆）上，每个字占30度。但注意，中文是方块字，宽度不同，所以不能平均分配。我的做法是先测量每个字的实际宽度（用ctx.measureText），然后根据总宽度动态调整起始角度。

代码逻辑大致这样：

// 伪代码示例，理解思路即可

let totalWidth = 0; let charWidths = [];
for(let char of text) { let w = ctx.measureText(char).width; charWidths.push(w); totalWidth += w; }
let startAngle = -Math.PI/2 - totalWidth/(2 * radius); // 从正上方开始，居中
for(let i=0; i   let charAngle = charWidths[i] / radius;
  ctx.save();
  ctx.translate(centerX + radius * Math.cos(startAngle + charAngle/2), centerY + radius * Math.sin(startAngle + charAngle/2));
  ctx.rotate(startAngle + charAngle/2 + Math.PI/2);
  ctx.fillText(text[i], 0, 0);
  ctx.restore();
  startAngle += charAngle;
}

这里的关键点：旋转角度要加Math.PI/2，因为文字默认是水平方向，而我们需要文字朝向圆心。很多人忘记这一步，结果文字是横着躺在圆上的。

三、五角星的绘制：别用路径硬画，用数学公式

五角星看起来简单，但用路径画很容易出现尖角不尖、对称性差的问题。最可靠的是用正五边形顶点坐标公式，然后每隔一个顶点连线。

公式：对于半径为R的圆，五个顶点角度分别为 -Math.PI/2 + i * (2*Math.PI/5)，i从0到4。然后取外顶点和内顶点交替：外顶点用半径R，内顶点用半径R*0.38（黄金比例相关）。

画的时候注意：不要用fill直接填充，因为五角星内部会有重叠区域。正确做法是用ctx.beginPath，从第一个外顶点开始，依次连线到第三个外顶点（跳过内顶点），再回到第一个外顶点。这样画出来的五角星才是实心的，而且边缘干净。

对比一下：用路径硬画的人，五角星内部经常出现白色缝隙，就是因为顶点顺序错了。用数学公式就不会有这个问题。

四、防伪细节：让图章看起来是真的

真正的公章有几个特征：颜色不均匀（有深浅变化）、边缘有轻微毛刺、文字有压痕感。小程序里做图章，如果太完美反而假。

我的做法是：在绘制完成后，用ctx.createRadialGradient加一层半透明的黑色渐变，从中心到边缘透明度从0.1到0.3，这样图章看起来有立体感。然后随机在边缘加几个像素的抖动（用Math.random生成0.5-1.5px的偏移），模拟印章按压时的变形。

还有一个容易被忽略的点：文字和边框之间要有细微的留白。真章因为橡胶材质，文字和边框不会完全贴死。我在代码里会设置一个padding变量，默认为5px，让文字轨道向内缩进。

五、小程序里的交互设计：让用户自己调参数

图章制作不是一次性的，用户可能需要调整文字内容、字体大小、颜色深浅。小程序里应该提供滑块和输入框让用户实时调整。

具体实现：用slider组件控制半径（80-150px），用picker选择字体（但小程序字体有限，建议只提供宋体和黑体，其他字体在canvas里可能显示异常）。颜色选择器用color-picker组件，但注意一定要让用户能预览，因为图章颜色在不同屏幕上色差很大。

我踩过的一个坑：真机预览时图章模糊。原因是canvas的dpr（设备像素比）没设置。解决方案是在绘制前获取系统信息：wx.getSystemInfoSync().pixelRatio，然后设置canvas的宽高乘以这个比例，再用ctx.scale放大。这样在Retina屏上也不会模糊。

六、导出与分享：别用截图，用canvasToTempFilePath

很多人做好图章后，直接截图保存，结果图片带白边、分辨率低。正确做法是用wx.canvasToTempFilePath，设置destWidth和destHeight为实际像素的两倍（比如画布是300px，导出设为600px），这样导出的图片清晰度够用。

如果用户想分享到朋友圈，要生成带透明背景的PNG。但小程序canvas默认背景是白色，需要手动设置ctx.clearRect为透明。注意：透明背景的图章在微信里显示可能会变黑，这是微信的bug，解决办法是在导出前用ctx.fillStyle = 'rgba(0,0,0,0)'填充整个画布，再绘制图章。

还有一个进阶需求：批量生成不同角度的图章。比如用户需要同一枚章盖在不同位置，可以提供一个“旋转角度”参数，让用户拖动滑块从0度到360度旋转。这个用ctx.rotate实现，但注意旋转中心要设定为图章中心，而不是画布中心。

七、常见问题排查：为什么我的图章总是歪的？

歪的原因99%是坐标计算错误。很多人直接用ctx.translate移动画布原点，但忘记在绘制完每个字符后ctx.restore。这样会导致后续字符的坐标叠加，越画越歪。

另一个常见问题：文字方向反了。如果文字是顺时针排列但内容却是逆序的，检查你的起始角度。通常从-90度（正上方）开始，顺时针增加角度。如果文字还是反的，把startAngle改成-Math.PI/2 - totalAngle试试。

还有一个隐蔽的问题：五角星不在正中心。很多人画五角星时直接用ctx.arc画圆，但五角星的顶点并不在圆周上，而是在内切圆和外接圆之间。解决办法：用ctx.moveTo和ctx.lineTo手动绘制，不要依赖arc。

最后说一个很多人不知道的：微信小程序的canvas组件在iOS和Android上渲染效果不同。iOS上文字更清晰，但颜色偏冷；Android上颜色更艳，但边缘锯齿多。建议在代码里做平台判断，iOS用#C41A1A，Android用#B22222，这样肉眼看起来更接近真实印章。