前端，自定义印章效果

最新推荐文章于 2023-09-05 08:33:44 发布

长庚~Richarlie

最新推荐文章于 2023-09-05 08:33:44 发布

阅读量847

点赞数 2

分类专栏：前端文章标签：前端印章

原文链接：https://blog.csdn.net/qq_38261174/article/details/91955069

版权

前端专栏收录该内容

89 篇文章 6 订阅

订阅专栏

代码如下：

<html>
    <head>
        <meta charset="utf-8">
    </head>
	<style type="text/css" name="文字盖章">
	
		.seal-content{
			width: 300px;
			min-height: 60px;
			vertical-align: bottom;
			word-wrap: break-word;
            position: relative;
		}
		
		.seal-result{
			width: 60px;
            height: 60px;
			transform: rotate(30deg);
            border: solid 2px green;
			border-radius: 100%;
			text-align: center;
			color: green;
			font-size: 16px;
			font-weight: bold;
			line-height: 60px;
            right: 5px;
            bottom: 0px;
            position: absolute;
            background-color: rgba(255,255,255,0.8)
		}
		
		.seal-result-fail{
			border-color: red;
            color: red;
		}
	</style>
	
    <body>
		<div class="seal-content">
			通过的内容
			通过的内容
			通过的内容
			通过的内容
			通过的内容
			通过的内容
			通过的内容
			通过的内容
			通过的内容
			通过的内容
			通过的内容
			<div class="seal-result">通过</div>
		</div>
 
		<div class="seal-content">
			不通过的内容
			不通过的内容
			不通过的内容
			不通过的内容
			不通过的内容
			不通过的内容
			不通过的内容
			不通过的内容
			不通过的内容	
			不通过的内容
			<div class="seal-result seal-result-fail">不通过</div>
		</div>
		
		<div class="seal-content">
			<img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=61180a57a3014c080d3620f76b12696d/d6ca7bcb0a46f21f3635d9adfc246b600d33aecf.jpg" width="300"/>
			<div class="seal-result seal-result-fail">不通过</div>
		</div>
		
		<canvas id="canvas" width="200" height="200"></canvas>
		
    </body>
	
	<script name="自定义印章">
 
	   var canvas = document.getElementById("canvas");
	   var context = canvas.getContext('2d');
 
	   var text = "XXX专用章";
	   var companyName = "XXX科技股份有限公司";
 
	   // 绘制印章边框
	   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 = '20px 宋体';
		context.textBaseline = 'middle';//设置文本的垂直对齐方式
		context.textAlign = 'center'; //设置文本的水平对对齐方式
		context.lineWidth=1;
		context.strokeStyle = '#f00';
		context.strokeText(text,width,height+60);
 
		// 绘制印章单位  
		context.translate(width,height);// 平移到此位置,
		context.font = '23px 宋体';
		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];// 需要绘制的字符   
		   if (i == 0) {
			   context.rotate(5 * Math.PI / 6);
 
		   } else{
			   context.rotate(angle);
		   }
 
		   context.save();
		   context.translate(70, 0);// 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
		   context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴
		   context.strokeText(c, 0, 0);// 此点为字的中心点
		   context.restore();
	   }
 
	   //绘制五角星
		function create5star(context, sx, sy, radius, color, rotato) {
			context.save();
			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>
	
	<script>
		//Canvas学习这一片就够了
	  var link = "https://www.runoob.com/w3cnote/html5-canvas-intro.html";
	</script>
	
	
	
</html>

效果：

长庚~Richarlie

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
前端，自定义印章效果

代码如下：<html> <head> <meta charset="utf-8"> </head> <style type="text/css" name="文字盖章"> .seal-content{ width: 300px; min-height: 60px; vertical-align: bottom; word-wrap: break-word;
复制链接

扫一扫