效果图

代码

<!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>

H5组件Canvas画电子印章相关推荐

利用H5的canvas画一个时钟
学习了一周的canvas了,看了一些资料和视频,跟着视频也画了一些统计图和圆,矩形,线之类的,跟着视频也做了一个钟表,话不多说,直接上代码 canvas上套一个div盒子,作为钟表的背景 <di ...
新H5中用canvas画一个数字钟表
此文章是参考以往大牛代码,在大牛代码基础上加以更改而成. 本人暂时还是一名技术菜鸟,刚刚踏上web前端这条路才五个月,希望大牛们多多提携... 效果图如下: 话不多说,上代码: <body st ...
前端H5使用canvas画爱心以及笑脸
目录 canvas简介画爱心效果画笑脸效果结语 canvas简介 canvas是HTML5中推出的新功能,可以在页面上生成一个画布,使用js可以在画布上绘制一些图形. 画爱心画爱心我们需要 ...
如何用h5标签canvas画柱状图【立体】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js 1 if (window.CanvasRenderi ...
H5 canvas 画圆画圆角
canvas是H5的一大重点我们来学一下如何用canvas画圆画圆 arc(x,y,r,起始弧度,结束弧度,顺逆时针) x,y就是这个圆的圆心坐标 r是圆的半径弧度单位用Math.PI 顺逆时针 ...
使用H5的Canvas,实现证件照的识别
使用H5的Canvas,实现证件照的识别需求:实现证件照上传时,提示用户证件照是否合法. 思路:在用户上传的照片上取三个像素点,判断像素点是否符合证件照的特点项目中用到了element-plus中 ...
php开发h5游戏,H5的canvas实现贪吃蛇小游戏
这次给大家带来H5的canvas实现贪吃蛇小游戏,H5的canvas实现贪吃蛇小游戏注意事项有哪些,下面就是实战案例,一起来看一下. 本文介绍了H5 canvas实现贪吃蛇小游戏,分享给大家,具体如下 ...
canvas画简单的横向流程图
开发思路最近,因为在做基于MES系统进行工业互联网开发的项目:其中,在做demo时,我负责工序管理的开发,其中有一个功能是通过一个物料SFC码可以追踪该物料所经历的所有工序:网上有很多插件,比如D3 ...

H5组件Canvas画电子印章

效果图

代码

H5组件Canvas画电子印章相关推荐

最新文章

热门文章