技术经验分享: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

相关文章
|
6天前
|
JavaScript 前端开发 API
探讨JavaScript动态添加HTML文件的技术
探讨JavaScript动态添加HTML文件的技术
12 1
|
16天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
26 2
|
2天前
|
前端开发 JavaScript 容器
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
10 0
|
3天前
|
移动开发 JavaScript 开发工具
技术经验分享:html5游戏引擎
技术经验分享:html5游戏引擎
|
3天前
|
机器学习/深度学习
技术经验分享:HTML转义字符大全
技术经验分享:HTML转义字符大全
|
3天前
|
Web App开发 前端开发 JavaScript
技术经验分享:html视口单位:vw,vh,rem
技术经验分享:html视口单位:vw,vh,rem
|
2月前
|
设计模式 前端开发 Java
Java与HTML的深度融合:技术解析与应用实践
Java与HTML的深度融合:技术解析与应用实践
398 1
|
9天前
|
移动开发 监控 前端开发
基于 HTML5 WebGL 和 VR 技术的 3D 机房数据中心可视化
基于 HTML5 WebGL 和 VR 技术的 3D 机房数据中心可视化
|
23天前
|
移动开发 前端开发 JavaScript
浏览器端图表渲染技术SVG, VML HTML Canvas
浏览器端图表渲染技术SVG, VML HTML Canvas
14 0
|
Web App开发 移动开发 监控
基于HTML5技术的电力3D监控应用(四)
回答了知乎问题较长,一些使用WebGL的经验,作为新的一篇: 正好逛到这个问题,正好是2013年底,正好最近基于的HT for Web 3D做的电力项目收尾,正好用到的就是WebGL技术,因此说说自己的感觉供参考:1、2013年应该感谢Google和MS,前者提供了Android Chrome浏览器的WebGL支持,后者终于让IE11支持了WebGL并且减低到win7也能运行。
1015 0