last update 2025/06/18
圆形的图章,有4部分内容组成,标题,5角星,名字,编号.
5角星位于中心,5角星下方两个点的连线到圆心的距离就是图章名字的位置
标题内容的对称轴是Y轴,从Y轴下半部分起,顺时针排布,起点具体位置是从圆正下方90度(Y轴下半部分)为参照起点,根据内容所占有的圆心角计算出来.
// txtCirAngle 标题内容所占圆弧对应的圆心角 let txtStartA = Math.PI / 2 + Math.PI - txtCirAngle / 2 + Math.PI / 2;
编号与标题类似,也是Y轴对称,但是逆时针排布,起点是从圆正上方90度(Y轴上半部分)为参照起点,根据编号内容圆心角度计算
// numCirAngle 编号内容所占圆弧对应的圆心角 let numStartA = -Math.PI / 2 + Math.PI - numCirAngle / 2 - Math.PI / 2;
// 参数默认配置
let cfg = {
// 图章标题
title: 'xxxxxxxxxxx',
// 图章名字
name: 'yyyyy',
// 图章编号
num: '000000000000',
// 宽度: 像素(比例基准值) 300
width: 300,
// 边框厚度占宽度比例 3.5%
borderPPI: 3.5,
// 边框颜色
bdColor: '#ee0000',
// 五角星半径大小占宽度比例
start5PPI: 30,
// 文字颜色
color: '#ee0000',
// 文字字体
fontFamily: '仿宋,宋体,arial',
// 文字大小占宽度比例
fontSizePPI: 10,
// 文字间距角度 1-60
fontSP: 20,
// 字体blod 600
fontWeight: 600,
// 图章编号文字大小占宽度比例
numSizePPI: 8,
// 图章编号文字间距角度 1-60
numSP: 8,
// canvas画布DOM的Id
cavId: 'canvas1'
};