H5组件Canvas画电子印章

最新推荐文章于 2024-05-12 10:59:33 发布

mutu_du

最新推荐文章于 2024-05-12 10:59:33 发布

阅读量1.3k

点赞数

分类专栏： css JS 文章标签： javascript html5 css

本文链接：https://blog.csdn.net/d_x_program/article/details/116705388

版权

css 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

效果图

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas印章</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script>
<style>
   .div-relative{position:relative; color:#000; width:200px; height:200px}
   .div-a{ position:absolute; left:0px; top:0px; width:200px; height:200px}
</style>
</head>
<body>
<div style="margin:30px 200px;">
   <div style="margin:20px;">
       <div style="color:red;font-size:50px;text-align:center">XXX测试研究院办公室</div>
       <hr color="red">
       <div>
           <div style="font-size:30px;text-align:center">我院召开下半年工作布置会暨2021年优秀工作者表彰大会</div>
           <p style="text-indent: 2em;">5月11日下午，我院在报告厅召开工作布置会暨2021年优秀工作者表彰大会。院长XXX、党委书记XXXX、副院长XXX、XXX、党委副书记XXX、副院长XXX出席大会，大会由XXX书记主持。
           </p>
           <p style="text-indent: 2em;">   院长指出，下半年工作要做好“八大聚焦”：一、聚焦学科专业结构；二、聚焦队伍建设；三、聚焦综合实力，深化体制改革；四、聚焦立德树人；五、聚焦整合资源，加强产教融合；六、聚焦创新创业；七、聚焦国家战略；八、聚焦奋进之笔，集中力量办好大事。他希望全体员工要勇于担当、尽职尽责，把奋斗作为一种幸福。切实落实好工作部署，为建设应用型企业而努力奋斗。
           </p>
           <p style="text-indent: 2em;">
           会上，XXX副院长通报了优秀员工工作情况。   接着，学院领导分别为获得2021年上半年的优秀工作者颁发奖励，一等奖一名、二等奖两名，三等奖五名。
           </p>
           <p style="text-indent: 2em;">
               最后让我们为优秀员工送上诚挚的祝福。
           </p>
       </div>
       <div class="div-relative" style="float:right;padding-right:100px;">
           <canvas id="canvas" width="200" height="200"></canvas>
           <div class="div-a" style="text-align:center;padding-top:95px;font-size:20px">院办公室<br>
               2021 年 5 月 11 日</div>
       </div>
   </div>
<script>
// canvas绘制图像的原点是canvas画布的左上角
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
drawText($("#textname").val());
// 绘制圆形印章
function drawText(companyName="XXX测试研究院") {
// 清除画布法一
context.globalAlpha=1;
context.fillStyle="#ffffff";
var text = "办公室";
var companyName = companyName;

// 绘制印章边框
var width = canvas.width / 2;
var height = canvas.height / 2;
context.lineWidth = 5;
context.strokeStyle = "#f00";
context.beginPath();
context.arc(width, height, 90, 0, Math.PI * 2);//宽、高、半径
context.stroke();

//画五角星
create5star(context,width,height,25,"#f00",0);

// 绘制印章名称
context.font = '18px 宋体';
context.textBaseline = 'middle';//设置文本的垂直对齐方式
context.textAlign = 'center'; //设置文本的水平对对齐方式
context.lineWidth=1;
context.fillStyle = '#f00';
context.save();
context.translate(width,height+60);// 平移到此位置,
context.scale(1,2);//伸缩要先把远点平移到要写字的位置，然后在绘制文字
context.fillText(text,0,0);//原点已经移动
context.restore();

// 绘制印章单位
context.translate(width,height);// 平移到此位置,
context.font = '18px 宋体'
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];// 需要绘制的字符　　　　　　　　　//绕canvas的画布圆心旋转
if (i == 0) {
context.rotate(5 * Math.PI / 6);
} else{
context.rotate(angle);
}
context.save();
context.translate(66, 0);// 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴
context.scale(1,2);//伸缩画布，实现文字的拉长
context.fillText(c, 0, 0);// 此点为字的中心点
context.restore();
}
// 设置画布为最初的位置为原点，旋转回平衡的原位置，用于清除画布
context.rotate(-Math.PI/6);
context.translate(0-canvas.width/2,0-canvas.height/2);

//绘制五角星
/**
* 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上
* rotate:绕对称轴旋转rotate弧度
*/
function create5star(context, sx, sy, radius, color, rotato) {
context.save();
context.globalAlpha=1;
context.fillStyle = color;
context.translate(sx, sy);//移动坐标原点
context.rotate(Math.PI + rotato);//旋转
context.beginPath();//创建路径
var x = Math.sin(0);
var y = Math.cos(0);
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);
context.lineTo(x * radius, y * radius);
}
context.closePath();
context.stroke();
context.fill();
context.restore();
}
}
</script>
</body>
</html>

mutu_du

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
H5组件Canvas画电子印章

效果图代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML5 Canvas印章</title><script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script><style> .div-...
复制链接

扫一扫