JavaScript和html5 canvas生成圆形印章
代码:
function createSeal(id,company,name){var canvas = document.getElementById(id); var context = canvas.getContext('2d');// 绘制印章边框 var width=canvas.width/2;var height=canvas.height/2;context.lineWidth=7;context.strokeStyle="#f00";context.beginPath();context.arc(width,height,110,0,Math.PI*2);context.stroke();//画五角星create5star(context,width,height,30,"#f00",0);// 绘制印章名称 context.font = '22px Helvetica';context.textBaseline = 'middle';//设置文本的垂直对齐方式context.textAlign = 'center'; //设置文本的水平对对齐方式context.lineWidth=1;context.fillStyle = '#f00';context.fillText(name,width,height+65);// 绘制印章单位 context.translate(width,height);// 平移到此位置,context.font = '30px Helvetica'var count = company.length;// 字数 var angle = 4*Math.PI/(3*(count - 1));// 字间角度 var chars = company.split(""); var c;for (var i = 0; i < count; i++){c = chars[i];// 需要绘制的字符 if(i==0)context.rotate(5*Math.PI/6);elsecontext.rotate(angle);context.save(); context.translate(90, 0);// 平移到此位置,此时字和x轴垂直 context.rotate(Math.PI/2);// 旋转90度,让字平行于x轴 context.fillText(c,0, 5);// 此点为字的中心点 context.restore(); }//绘制五角星 /** * 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上 * rotate:绕对称轴旋转rotate弧度 */ 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(); } }
挂载元素:
<canvas id="canvas" width="250" height="250"></canvas>
调用:
createSeal('canvas','江西省晨尚科技有限公司','测试专用章');
效果:
获取图片Base64:
document.getElementById('canvas').toDataURL("image/png");
如果需要用php保存到服务器上的话,可以参考下面的代码:
$str = $_POST['base64']; preg_match('/^(data:\s*image\/(\w+);base64,)/', $str, $result); $str = str_replace($result[1], '', $str); file_put_contents('a.png',base64_decode($str));
JavaScript和html5 canvas生成圆形印章相关推荐
- [转]JavaScript和html5 canvas生成圆形印章
本文转自:http://www.cnblogs.com/dragondean/p/6013529.html 代码: function createSeal(id,company,name){var c ...
- html5 canvas绘制圆形印章,以及与页面交互
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 < ...
- html5悬浮圆圈背景动画特效,HTML5 canvas梦幻圆形泡泡动画背景特效
background.js是一款HTML5 canvas梦幻圆形泡泡动画背景特效.通过background.js插件,你可以轻松的制作出带渐变效果的气泡动画背景效果,并且背景颜色能在4种颜色间平滑过渡 ...
- html5 canvas绘制圆形进度实例
2019独角兽企业重金招聘Python工程师标准>>> html5 canvas绘制圆形进度实例 <canvas id="test" width=200 h ...
- java 画笔粗细,javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
js+html5 canvas实现的涂鸦画板特效,可调画笔颜色|粗细|橡皮,可以保存涂鸦效果为图片编码,非常适合学习html5的canvas,必须支持html5的浏览器才能看到效果. javascri ...
- javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板 <!doctype html> <head> <meta http-equiv= ...
- html绘制动态小人,JavaScript和html5 canvas如何绘制一个小人的代码
这篇文章主要介绍了JavaScript+html5 canvas绘制的小人效果,涉及JavaScript结合html5 canvas图形绘制及颜色随机填充的技巧,需要的朋友可以参考下 本文实例讲述了J ...
- html怎么把图片做成一条花纹,html5 canvas生成精美网页花纹背景图像js插件
这是一款可以在指定容器中生成精美网页背景花纹图像的js插件.该花纹背景插件使用js来生成html5 canvas,并在canvas中绘制各种花纹图像.生成的背景花纹图像可以是静态的,也可以制作成动态花 ...
- html绘制静态图表,怎样用JavaScript和HTML5 Canvas绘制图表
在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状图和圆环图上显示数字信息. 与从零到一创建图表相比,其实有更简便的方式,例如用CodeCanyon上的这个图表库 但是如果你想 ...
最新文章
- 浙江大学PAT上机题解析之1011. World Cup Betting (20)
- Educational Codeforces Round 50 (Rated for Div. 2)的A、B、C三题AC代码
- 我の第一篇万字博文 | 带大家开开心心地进入Python世界
- 基于 Nginx 的 HTTPS 性能优化实践
- MySQL数据库的优化(下)MySQL数据库的高可用架构方案
- iar 看时序_IAR 硬件仿真查看运行时间
- 如何不用BPM配置时间
- 无向图中两点之间的距离_九上数学:二次函数图像,一动点到两定点距离和最小...
- 开课吧课堂:详解挂起、恢复和终止线程
- JAVA-Servlet操纵方法
- JSONView下载安装
- 【kubernetes/k8s源码分析】CNI calico ipam源码分析
- Proximal Algorithms 1 介绍
- 手游大话藏宝阁找不到服务器,大话西游手游藏宝阁指定交易在哪里 藏宝阁怎么没有指定我...
- 媲美软件安装管家的网站
- python hydra库
- tp5ajax轮询,ajax轮询查询状态并输出提示音 TP5+jquery+ajax声音提示功能
- 我的世界服务器怎么修改地图,我的世界开服教程[无需开服器]【教换主城地图】(自带端口映射工具)...
- html5+css3学习(上)
- 电路中电容怎么计算?
热门文章
- java word插件开发_java生成word的几种方案
- 数据库系统设计_银行业务管理系统
- java调用腾讯地图根据经纬度获取位置信息
- 100量子比特量子计算机,51量子比特模拟器问世,大规模量子计算机迈出重要一步...
- Docker软件安装文档
- Samba服务和FTP服务
- ot permission denied while trying to connect to the Docker daemon socket at
- Matlab 打不开 无法运行 win10 系统 卡在启动界面没有反应 语言bug
- 获取指定年份的工作日和节假日后导入Excel
- 计算机硬件英语词汇,计算机硬件英语词汇