技术经验分享:html生成印章

简介: 技术经验分享:html生成印章

[/span>html

[/span>head

[/span>meta charset="utf-8"


[/span>style type="text/css" name="文字盖章"

.seal-content{


Width</span>: 300px;


min-Height</span>: 60px;


vertical-align: bottom;


word-wrap: break-word;


position: relative;


}


.seal-result{


Width</span>: 60px;


Height</span>: 60px;


transform: rotate(30deg);


border: solid 2px green;


border-radius: 100%;


text-align: center;


color: green;


font-size: 16px;


font-weight: bold;


line-Height</span>: 60px;


right: 5px;


bottom: 0px;


position: absolute;


background-color: rgba(255,255,255,0.8)


}


.seal-result-fail{


border-color: red;


color: red;


}



[/span>body

[/span>canvas id="canvas" Width</span>="200" //代码效果参考:http://www.lyjsj.net.cn/wz/art_22970.html

Height</span>="200"


[/span>script name="自定义印章"

var canvas = document.getElementById("canvas");


var context = canvas.getContext('2d');


var text = "XXX专用章";


var companyName = "XXX科技股份有限公司";


// //代码效果参考:http://www.lyjsj.net.cn/wx/art_22968.html

绘制印章边框

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</span>=1;


context.strokeStyle = '#f00';


context.strokeText(text,width,Height</span>+60);


// 绘制印章单位


context.translate(width,height);// 平移到此位置,


context.font = '23px 宋体';


var count = companyName.length;// 字数


var angle = 4//代码效果参考:http://www.lyjsj.net.cn/wx/art_22966.html

Math.PI/(3(count - 1));// 字间角度

var chars = companyName.split("");


var c;


for (var i = 0; i [/span> 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<span style="backg

相关文章
|
13天前
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些其他应用
HTML5与神经网络技术的结合有哪些其他应用
31 3
|
13天前
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些
HTML5与神经网络技术的结合有哪些
28 2
|
1月前
|
移动开发 前端开发 JavaScript
HTML与现代Web开发的不同技术
【10月更文挑战第11天】HTML与现代Web开发的不同技术
21 0
|
3月前
|
存储 移动开发 前端开发
HTML5时代来临,这些新特性你掌握了吗?一篇文章带你玩转Web前端技术潮流!
【8月更文挑战第26天】HTML5(简称H5)作为新一代Web标准,相比HTML4带来了诸多增强功能。
57 2
|
3月前
|
前端开发 JavaScript 数据安全/隐私保护
【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)
【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)
34 1
|
3月前
|
编解码 移动开发 前端开发
【海贼王航海日志:前端技术探索】HTML你学会了吗?(一)
【海贼王航海日志:前端技术探索】HTML你学会了吗?(一)
25 1
|
5月前
|
前端开发 JavaScript 容器
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
65 0
|
Web App开发 移动开发 监控
基于HTML5技术的电力3D监控应用(四)
回答了知乎问题较长,一些使用WebGL的经验,作为新的一篇: 正好逛到这个问题,正好是2013年底,正好最近基于的HT for Web 3D做的电力项目收尾,正好用到的就是WebGL技术,因此说说自己的感觉供参考:1、2013年应该感谢Google和MS,前者提供了Android Chrome浏览器的WebGL支持,后者终于让IE11支持了WebGL并且减低到win7也能运行。
1026 0
|
Web App开发 监控 程序员
基于HTML5技术的电力3D监控应用(三)
继(一)和(二)之后不少,不少网友问我移动终端的使用问题,因为我们项目这次采用Android平板终端,所以我对这方面有点肤浅的研究,这篇分享些项目经验总结,希望对大家有所帮助。 电力3D项目去年底刚立项时,需求仅仅是PC浏览器的3D展示要求,后来慢慢增加了要求也能在平板上运行,因为我们的系统大部分是内网的,不可能要求移动终端得上app store去下载应用程序,虽然apple也提供企业内部发布的解决方案,但还是远不如android安装app方便,对于企业应用三天两头就需要改动需求,我们的发布非常频繁,所以最终移动端选型采用Android的方案。
1143 0
|
移动开发 监控 HTML5
基于HTML5技术的电力3D监控应用(一)
最近参与了国网计量中心的四线一库自动化检定系统的项目开发,团队封闭开发了大半年终于快到尾声了,整个项目过程实在非常累,我的mentor杨杨老师是这样描述的:累的不想说话了。我估计是我太渴望新知识,整天不断问他问题把他搞烦了。
1129 0