canvas实行五星红旗盖章

公司盖章

<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>
		<canvas id="canvas" width="500" height="500"></canvas>

	</body>

	<script name="自定义印章">
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext('2d');

		var text = "牛逼专用章";
		var companyName = "牛逼科技股份有限公司";

		var size = 0; //大小不包含文字
		var fontSize = 20 ; //文字大小
		var round = 0; //外圈的大小
		// 绘制印章边框
		var width = canvas.width / 2;
		var height = canvas.height / 2;
		context.lineWidth = 5;
		context.strokeStyle = "#f00";
		context.beginPath();
		context.arc(width, height, 90 + size + round, 0, Math.PI * 2); //宽、高、半径
		context.stroke();

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

		// 绘制印章名称
		context.font = `${fontSize}px 宋体`;
		context.textBaseline = 'middle'; //设置文本的垂直对齐方式
		context.textAlign = 'center'; //设置文本的水平对对齐方式
		context.lineWidth = 1;
		context.strokeStyle = '#f00';
		context.strokeText(text, width, height + 60 + size);

		// 绘制印章单位  
		context.translate(width, height); // 平移到此位置,
		context.font = `${fontSize + 3}px 宋体`;
		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 + size, 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>
posted @ 2022-05-09 17:34  小泽沐优声  阅读(49)  评论(0)  编辑  收藏  举报