canvas生成圆形图章（名称紧凑和散开）

使用canvas画公章

// 生成公章
function comCreateSeal(_opts){var opts = {canvas: null, // 生成的canvas domcompany: "", // 机构名称companyTight: false, // 公司名称是否紧凑name: "专用章"}if (typeof _opts == 'object') {opts = Object.assign(opts, _opts);}var context = opts.canvas.getContext('2d');context.fillStyle = 'rgba(255, 255, 255, 0)';// 绘制印章边框   var width=opts.canvas.width/2;var height=opts.canvas.height/2;context.lineWidth=3;context.strokeStyle="#f00";context.beginPath();context.arc(width,height,78,0,Math.PI*2);context.stroke();context.save(); //画五角星context.save();  context.fillStyle="#f00";  context.translate(width,height);//移动坐标原点  context.rotate(Math.PI+0);//旋转  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*25,y*25);  }   context.closePath();  context.stroke();  context.fill();  context.restore(); // 绘制印章名称   context.font = '18px Helvetica';context.textBaseline = 'middle';//设置文本的垂直对齐方式context.textAlign = 'center'; //设置文本的水平对对齐方式context.lineWidth=1;context.fillStyle = '#f00';context.fillText(opts.name,width,height+53);// 绘制印章单位   context.translate(width,height);// 平移到此位置,var count = opts.company.length;// 字数   if (count > 14) {var maxCount = 18;context.font = '16px Helvetica'if (opts.companyTight) {var angle = 4*Math.PI/51;// 字间角度  } else {var angle = 4*Math.PI/(3*(count - 1));// 字间角度  }} else {var maxCount = 14;context.font = '20px Helvetica'if (opts.companyTight) {var angle = 4*Math.PI/39;// 字间角度  } else {var angle = 4*Math.PI/(3*(count - 1));// 字间角度  } }var chars = opts.company.split("");   var c;for (var i = 0; i < count; i++){c = chars[i];// 需要绘制的字符   if(i==0) {if (opts.companyTight) {context.rotate(5*Math.PI/6 + angle*((maxCount-count)/2));} else {context.rotate(5*Math.PI/6);} } else {context.rotate(angle);}context.save(); context.translate(64, 0);// 平移到此位置,此时字和x轴垂直   context.rotate(Math.PI/2);// 旋转90度,让字平行于x轴   context.fillText(c,0, 5);// 此点为字的中心点   context.restore();             }
}

紧凑型：

comCreateSeal({canvas: document.getElementById("canvas"),company: "某机构名称",companyTight: true
})

效果图：

散开型：

comCreateSeal({canvas: document.getElementById("canvas"),company: "某机构名称",companyTight: false
})

效果图：

canvas生成圆形图章（名称紧凑和散开）相关推荐

JavaScript和html5 canvas生成圆形印章
代码: function createSeal(id,company,name){var canvas = document.getElementById(id); var context = can ...
[转]JavaScript和html5 canvas生成圆形印章
本文转自:http://www.cnblogs.com/dragondean/p/6013529.html 代码: function createSeal(id,company,name){var c ...
微信小程序输入文字用canvas生成公章并转为图片
<input type="text" placeholder="请输入公司名称" bindinput="bindInputCompany&quo ...
android生成圆形头像
/*各种各样的图如何如何生成圆形头像,请下面看下面,可以先用bitmp直接用 Bitmap.createScaledBitmap(),如果是存到数据库里面的话,先把转它转成string,然后放取出来, ...
mpvue 微信小程序canvas生成海报
mpvue 微信小程序canvas生成海报效果贴代码 html <template><view class="poster ...
浅谈如何使用canvas生成二维码
适用于新手不知道怎么生产二维码,按照步骤一步一步来,自己也可以生成二维码 1.引入需要得js库引入jquery <script src="http://libs.baidu.com/ ...
uniapp项目中使用canvas生成海报并保存、微信分享、发送至朋友圈
uniapp项目中使用canvas生成海报并保存.微信分享.发送至朋友圈 1.html <canvas canvas-id="poster&qu ...
小程序通过canvas生成海报保存为图片的技巧
小程序通过canvas生成海报保存为图片的技巧最近公司要求在小程序点击分享,要生成一张图片,可以保存在用户相册里,图片里的内容根据后台返回的数据生成,这就涉及到小程序画布的知识了,因为微信文档上,画 ...
canvas绘制圆形
canvas绘制圆形的思路: 1.创建路径 XXX.beginpath(); 2.创建圆形的路径: 3.关闭路径:XXX.closepath(); 路径不关闭也能绘制出图形 4.设定绘制样式. 创建圆 ...

canvas生成圆形图章（名称紧凑和散开）

canvas生成圆形图章（名称紧凑和散开）相关推荐

最新文章

热门文章