用 canvas 原生JS创建红色公章

javascript 复制代码
function officialseal(opt) {
	opt = opt || {
		canvas: $$('#canvas'),
		companyName: canvas.getAttribute('data-companyName'),
		sealTypeName: canvas.getAttribute('data-sealTypeName')
	};
	
	// official seal
	var ctx = opt['canvas'].getContext('2d'), color = '#f00', width = opt['canvas'].width/2, height = opt['canvas'].height/2;
	ctx.lineWidth = 6;
	ctx.strokeStyle = color;
	ctx.beginPath();
	ctx.arc(width, height, 110, 0, Math.PI*2);
	ctx.stroke();

	// five pointed star
	var radius = 30, rotato = 0;
	ctx.save();
	ctx.fillStyle = color;
	ctx.translate(width, height);
	ctx.rotate(Math.PI+rotato);
	ctx.beginPath();
	var x, y, dig = Math.PI/5*4;
	for (var i = 0;i< 5;i++) {
		 x = Math.sin(i*dig);
		 y = Math.cos(i*dig);
		 ctx.lineTo(x*radius, y*radius);
	}
	ctx.closePath();
	ctx.stroke();
	ctx.fill();
	ctx.restore();
	
	// sealTypeName
	ctx.font = '20px Microsoft YaHei';
	ctx.textBaseline = 'middle';
	ctx.textAlign = 'center';
	ctx.lineWidth = 1;
	ctx.fillStyle = color;
	ctx.fillText(opt['sealTypeName'], width, height+70);

	// companyName
	ctx.translate(width, height);
	ctx.font = '26px Microsoft YaHei';
	var  chars = opt['companyName'].split('')
		, count = chars.length
		, angle = 4*Math.PI / (3*(count - 1))
	;
	for (var i = 0; i < chars.length; i++){ // var character = chars[i];
		if (i == 0) {
			ctx.rotate(5*Math.PI/6);
		} else {
			ctx.rotate(angle);
		}
		ctx.save(); 
		ctx.translate(90, 0);
		ctx.rotate(Math.PI/2);
		ctx.fillText(chars[i], 0, 5);
		ctx.restore(); 
	}
}
html 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width,user-scalable=yes" />
<meta name="renderer" content="webkit|ie-comp|ie-stand" />
<title>official_seal</title>
<script src="/js/u.js?v=1"></script>
</head>
<body onclick="clickHandler(event);" onchange="changeHandler(event);">
<canvas id="canvas" width="250" height="250" data-companyName="郑州快马科技有限公司" data-sealTypeName="测试专用章"></canvas>
<script src="official_seal.js?v=1"></script>
</body>
</html>
相关推荐
AA-代码批发V哥8 小时前
HTML之语义化标签与多媒体标签
html
像风一样自由20208 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊9 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
Liudef0610 小时前
2048小游戏实现
javascript·css·css3
独立开阀者_FwtCoder13 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句13 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom13 小时前
JavaScript reduce()函数详解
javascript
小飞悟13 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子13 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手13 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript