<html>
<head><meta charset="utf-8" /></head>
<body>
<br/>上半边内容:<input type="text" id="upStr" value="中华人民共和国" />
<br/>下半边内容:<input type="text" id="downStr" value="201312654954" />
<br/>中间的内容:<input type="text" id="middleStr" value="财务专用章" />
<br/>印章的半径:<input type="text" id="radii" value="150" />
<br/><input type="button" value="生成" onclick="test();" />
<br/><canvas id="test" width="400" height="400"></canvas>
<script>
var THISPI = Math.PI / 180;
function DrawSeal(canvasID,upStr,downStr,middleStr,radii)
{
var canvas = ElementById(canvasID);
canvas.width = radii * 2;
canvas.height = canvas.width;
var Context('2d');
context.save();
FillPentacle("#FF0000",context,radii, radii, radii * 0.3);
var edge = radii * 0.04;//外圈宽度
varh5平台源码下载 diametre = radii * 2 - edge * 2;//外圈的直径
//开始绘外圆
store();
context.save();
context.beginPath();
context.arc(radii,radii,radii - edge,0,Math.PI*2,false);
context.closePath();
context.lineWidth = edge;
context.strokeStyle = 'red';
context.stroke();
//开始绘上半部份文字
var _startAngle = 135, _endAngle = 45;
if (upStr != "")
{
if (downStr != "")
{
_startAngle = 155;//如果有底部文字则缩紧点
_endAngle = 25;
}
if (middleStr != "")
{
_startAngle = 170;//如果有中间文字则缩紧点
_endAngle = 10;
}
var fontSize = radii * 0.38;
store();
context.save();
var font="bold " + fontSize + "px 宋体";
var fillStyle="#FF0000"
DrawRotatedText(context, upStr, font, fillStyle, _startAngle, _endAngle
, radii, radii, radii * 0.66, 90, true);
}
//开始绘下半边文字
if (downStr != "")
{
var font="bold " + (radii * 0.08) + "px 宋体";
var fillStyle="#FF0000"
//计算出平均角度
var upAvgAngle = 0;
if (_startAngle <= _endAngle)//如果开始角度大于结束角度则需要考虑超出360度的问题
{
upAvgAngle = (_endAngle - _startAngle) / (upStr.length - 1);
}
else
{
upAvgAngle = (_endAngle + 360 - _startAngle) / (upStr.length - 1);
}
_endAngle += upAvgAngle;//底部文字与顶部文字增加间距
_startAngle -= upAvgAngle;
if (middleStr != "")
{
_startAngle = 130;//如果有中间文字,再次综紧一点文字间距
_endAngle = 50;
}
DrawRotatedText(context, downStr, font, fillStyle, _endAngle, _startAngle
, radii, radii, radii * 0.85, 270,false);
}
//开始绘制中间文件
if (middleStr != "")
{
store();
context.save();
context.font="bold " + (radii * 0.23) + "px 宋体"
context.fillStyle="#FF0000"
var tempX = 0, tempY = 0;
var thisRadii = (radii - edge * 2);
var downMaxWidth = (thisRadii - (thisRadii + thisRadii * s(135 * THISPI))) * 2;//中间总宽度
tempY = radii + radii * Math.sin(30 * THISPI);//中间文件的Y坐标
var tempSizeF = asureText(middleStr);
tempY = radii + radii * Math.sin(30 * THISPI);
if (downMaxWidth >= tempSizeF.width)//如果当前文字没超过总宽度,则文本居中
{
tempX = radii - tempSizeF.width / 2;
}
else
{
var fontWidth = downMaxWidth / middleStr.length;
tempX = thisRadii + thisRadii * s(135 * THISPI) + edge * 2;
}
context.fillText(middleStr,tempX,tempY,downMaxWidth);
}
}
// 绘制环绕中心点的文字 参数说明:
// context : H5canvas
// Content : 文本内容
// font : 字体样式 (bold 20px 宋体)
// fillStyle : 字体颜
// _startAngle : 开始角度
// _endAngle : 结束角度
// X : 圆心X坐标
// Y : 圆心Y坐标
// r : 圆的半径
// fontDirection : 旋转角度
// strDirection : 文字排列方向 (true 顺时钟,false 逆时钟)
function DrawRotatedText(context, Content, font, fillStyle, _startAngle, _endAngle, X, Y, r, fontDirection, strDirection){
if (Content == null || Content == "") return;
//计算出平均角度
var avgAngle = 0;
if (_startAngle <= _endAngle)//如果开始角度大于结束角度则需要考虑超出360度的问题
{
avgAngle = (_endAngle - _startAngle) / (Content.length - 1);
}
else
{
avgAngle = (_endAngle + 360 - _startAngle) / (Content.length - 1);
}
var tempX = _startAngle, tempY = _endAngle;
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论