代码:

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生成圆形印章相关推荐

  1. [转]JavaScript和html5 canvas生成圆形印章

    本文转自:http://www.cnblogs.com/dragondean/p/6013529.html 代码: function createSeal(id,company,name){var c ...

  2. html5 canvas绘制圆形印章,以及与页面交互

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 < ...

  3. html5悬浮圆圈背景动画特效,HTML5 canvas梦幻圆形泡泡动画背景特效

    background.js是一款HTML5 canvas梦幻圆形泡泡动画背景特效.通过background.js插件,你可以轻松的制作出带渐变效果的气泡动画背景效果,并且背景颜色能在4种颜色间平滑过渡 ...

  4. html5 canvas绘制圆形进度实例

    2019独角兽企业重金招聘Python工程师标准>>> html5 canvas绘制圆形进度实例 <canvas id="test" width=200 h ...

  5. java 画笔粗细,javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板

    js+html5 canvas实现的涂鸦画板特效,可调画笔颜色|粗细|橡皮,可以保存涂鸦效果为图片编码,非常适合学习html5的canvas,必须支持html5的浏览器才能看到效果. javascri ...

  6. javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板

    javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板 <!doctype html> <head> <meta http-equiv= ...

  7. html绘制动态小人,JavaScript和html5 canvas如何绘制一个小人的代码

    这篇文章主要介绍了JavaScript+html5 canvas绘制的小人效果,涉及JavaScript结合html5 canvas图形绘制及颜色随机填充的技巧,需要的朋友可以参考下 本文实例讲述了J ...

  8. html怎么把图片做成一条花纹,html5 canvas生成精美网页花纹背景图像js插件

    这是一款可以在指定容器中生成精美网页背景花纹图像的js插件.该花纹背景插件使用js来生成html5 canvas,并在canvas中绘制各种花纹图像.生成的背景花纹图像可以是静态的,也可以制作成动态花 ...

  9. html绘制静态图表,怎样用JavaScript和HTML5 Canvas绘制图表

    在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状图和圆环图上显示数字信息. 与从零到一创建图表相比,其实有更简便的方式,例如用CodeCanyon上的这个图表库 但是如果你想 ...

最新文章

  1. 浙江大学PAT上机题解析之1011. World Cup Betting (20)
  2. Educational Codeforces Round 50 (Rated for Div. 2)的A、B、C三题AC代码
  3. 我の第一篇万字博文 | 带大家开开心心地进入Python世界
  4. 基于 Nginx 的 HTTPS 性能优化实践
  5. MySQL数据库的优化(下)MySQL数据库的高可用架构方案
  6. iar 看时序_IAR 硬件仿真查看运行时间
  7. 如何不用BPM配置时间
  8. 无向图中两点之间的距离_九上数学:二次函数图像,一动点到两定点距离和最小...
  9. 开课吧课堂:详解挂起、恢复和终止线程
  10. JAVA-Servlet操纵方法
  11. JSONView下载安装
  12. 【kubernetes/k8s源码分析】CNI calico ipam源码分析
  13. Proximal Algorithms 1 介绍
  14. 手游大话藏宝阁找不到服务器,大话西游手游藏宝阁指定交易在哪里 藏宝阁怎么没有指定我...
  15. 媲美软件安装管家的网站
  16. python hydra库
  17. tp5ajax轮询,ajax轮询查询状态并输出提示音 TP5+jquery+ajax声音提示功能
  18. 我的世界服务器怎么修改地图,我的世界开服教程[无需开服器]【教换主城地图】(自带端口映射工具)...
  19. html5+css3学习(上)
  20. 电路中电容怎么计算?

热门文章

  1. java word插件开发_java生成word的几种方案
  2. 数据库系统设计_银行业务管理系统
  3. java调用腾讯地图根据经纬度获取位置信息
  4. 100量子比特量子计算机,51量子比特模拟器问世,大规模量子计算机迈出重要一步...
  5. Docker软件安装文档
  6. Samba服务和FTP服务
  7. ot permission denied while trying to connect to the Docker daemon socket at
  8. Matlab 打不开 无法运行 win10 系统 卡在启动界面没有反应 语言bug
  9. 获取指定年份的工作日和节假日后导入Excel
  10. 计算机硬件英语词汇,计算机硬件英语词汇