vue橫向文與下弦文圓形和橢圓公章

第一步：新建paintingSeal.js文件，文件內(nèi)容如下：

"use strict";

let Seal = {

? ? //簽章顏色定義

? ? colors: ['red', 'blue', '#000'],

? ? //簽章字體定義

? ? fonts: ['宋體', 'YouYuan', 'KaiTi'],

? ? baseConf: {

? ? ? ? color: null,

? ? ? ? font: null,

? ? },

? ? commonMethod(cType, fType) {

? ? ? ? let color = null;

? ? ? ? color = this.colors[cType];

? ? ? ? if (color === undefined || color == 'undefined') {

? ? ? ? ? ? color = this.colors[0];

? ? ? ? }

? ? ? ? let font = this.fonts[fType];

? ? ? ? if (font === undefined || font == 'undefined') {

? ? ? ? ? ? font = this.fonts[0];

? ? ? ? }

? ? ? ? this.baseConf.color = color;

? ? ? ? this.baseConf.font = font;

? ? },

? ? /**

? ? *

? ? * @param company 公司名稱

? ? * @param sType 橫向文

? ? * @param seaNo 下弦文

? ? * @param cType 顏色 0.紅? 1. 藍色 2.其他

? ? * @param fType 字體 0.宋體

? ? */

? ? companySeal: function (company, sType, seaNo, cType, fType) {

? ? ? ? var canvas = document.createElement("canvas");

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

? ? ? ? canvas.width = 200;

? ? ? ? canvas.height = 200;

? ? ? ? this.commonMethod(cType, fType);

? ? ? ? let width = canvas.width / 2;

? ? ? ? let height = canvas.height / 2;

? ? ? ? //畫圓方法

? ? ? ? drawCircle()

? ? ? ? draw5Start(width, height)

? ? ? ? drawTitle();

? ? ? ? writeCompany()

? ? ? ? writeSeaNo()

? ? ? ? //返回圖片base64

? ? ? ? return canvas.toDataURL();

? ? ? ? function drawCircle() {

? ? ? ? ? ? context.lineWidth = 5;

? ? ? ? ? ? context.strokeStyle = Seal.baseConf.color;

? ? ? ? ? ? context.beginPath();

? ? ? ? ? ? context.arc(width, height, 90, 0, Math.PI * 2); //寬郑趁、高、半徑

? ? ? ? ? ? context.stroke();

? ? ? ? }

? ? ? ? function draw5Start(sx, sy) {

? ? ? ? ? ? context.save();

? ? ? ? ? ? context.fillStyle = Seal.baseConf.color;

? ? ? ? ? ? context.translate(sx, sy); //移動坐標原點

? ? ? ? ? ? context.rotate(Math.PI); //旋轉(zhuǎn)

? ? ? ? ? ? context.beginPath(); //創(chuàng)建路徑

? ? ? ? ? ? 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 * 20, y * 20);

? ? ? ? ? ? }

? ? ? ? ? ? context.closePath();

? ? ? ? ? ? context.stroke();

? ? ? ? ? ? context.fill();

? ? ? ? ? ? context.restore();

? ? ? ? }

? ? ? ? function drawTitle() {

? ? ? ? ? ? context.font = '12px ' + Seal.baseConf.font;

? ? ? ? ? ? context.textBaseline = "middle"; //設(shè)置文本的垂直對齊方式

? ? ? ? ? ? context.textAlign = "center"; //設(shè)置文本的水平對對齊方式

? ? ? ? ? ? context.lineWidth = 1;

? ? ? ? ? ? context.strokeStyle = Seal.baseConf.color;

? ? ? ? ? ? context.strokeText(sType, width, height + 45);

? ? ? ? }

? ? ? ? function writeCompany() {

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

? ? ? ? ? ? context.font = '18px ' + Seal.baseConf.font;

? ? ? ? ? ? var count1 = company.length; // 字數(shù)

? ? ? ? ? ? var angle1 = (6 * Math.PI) / (5 * (count1 - 1)); // 字間角度

? ? ? ? ? ? var chars1 = company.split("");

? ? ? ? ? ? var c1;

? ? ? ? ? ? for (var i = 0; i < count1; i++) {

? ? ? ? ? ? ? ? c1 = chars1[i]; // 需要繪制的字符

? ? ? ? ? ? ? ? if (i == 0) {

? ? ? ? ? ? ? ? ? ? context.rotate((19 * Math.PI) / 21);

? ? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? ? context.rotate(angle1);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? context.save();

? ? ? ? ? ? ? ? context.translate(75, 0); // 平移到此位置,此時字和x軸垂直闸昨，公司名稱和最外圈的距離

? ? ? ? ? ? ? ? context.rotate(Math.PI / 2); // 旋轉(zhuǎn)90度,讓字平行于x軸

? ? ? ? ? ? ? ? context.strokeText(c1, 0, 0); // 此點為字的中心點

? ? ? ? ? ? ? ? context.restore();

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? function writeSeaNo() {

? ? ? ? ? ? context.translate(0, 0); // 平移到此位置,

? ? ? ? ? ? context.font = '12px ' + Seal.baseConf.font;

? ? ? ? ? ? var count = seaNo.length; // 字數(shù)

? ? ? ? ? ? var angle = (-3 * Math.PI) / (5 * (count - 1)); // 字間角度

? ? ? ? ? ? var chars = seaNo.split("");

? ? ? ? ? ? var c;

? ? ? ? ? ? for (var i = 0; i < count; i++) {

? ? ? ? ? ? ? ? c = chars[i]; // 需要繪制的字符

? ? ? ? ? ? ? ? if (i == 0) {

? ? ? ? ? ? ? ? ? ? context.rotate((7 * Math.PI) / 10);

? ? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? ? context.rotate(angle);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? context.save();

? ? ? ? ? ? ? ? context.translate(80, 0); // 平移到此位置,此時字和x軸垂直喉脖，公司名稱和最外圈的距離

? ? ? ? ? ? ? ? context.rotate((Math.PI * 3) / 2); // 旋轉(zhuǎn)90度,讓字平行于x軸

? ? ? ? ? ? ? ? context.strokeText(c, 0, 0); // 此點為字的中心點

? ? ? ? ? ? ? ? context.restore();

? ? ? ? ? ? }

? ? ? ? }

? ? },

? ? /**

? ? *

? ? * @param company 公司名稱

? ? * @param sType 橫向文

? ? * @param seaNo 下弦文

? ? * @param cType 顏色 0.紅? 1. 藍色 2.其他

? ? * @param fType 字體 0.宋體

? ? */

? ? companyEllipse: function (company, sType, seaNo, cType, fType) {

? ? ? ? //橢圓長軸半徑

? ? ? ? var radiusX = 200;

? ? ? ? //短軸半徑

? ? ? ? var radiusY = 125;

? ? ? ? this.commonMethod(cType, fType);

? ? ? ? var color = Seal.baseConf.color;

? ? ? ? var font = Seal.baseConf.font;

? ? ? ? var canvas = document.createElement("canvas");

? ? ? ? canvas.width = 200;

? ? ? ? canvas.height = 200;

? ? ? ? canvas.width = 2 * radiusX + 5;

? ? ? ? canvas.height = 2 * radiusY + 5;

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

? ? ? ? writeFont(true, company);

? ? ? ? writeFont(false, seaNo);

? ? ? ? writeTitle();

? ? ? ? drawEllipse();

? ? ? ? return canvas.toDataURL();

? ? ? ? function drawEllipse() {

? ? ? ? ? ? context.ellipse(radiusX + context.lineWidth + 1, radiusY + context.lineWidth + 1, radiusX, radiusY, 0, 0, Math.PI * 2);

? ? ? ? ? ? //背景透明

? ? ? ? ? ? context.fillStyle = "rgba(255, 255, 255, 0)";

? ? ? ? ? ? context.strokeStyle = color;

? ? ? ? ? ? context.lineWidth = 5;

? ? ? ? ? ? context.fill();

? ? ? ? ? ? context.stroke();

? ? ? ? }

? ? ? ? function writeFont(isTop, words) {

? ? ? ? ? ? var totalArcAng = 270;

? ? ? ? ? ? let f = ""

? ? ? ? ? ? //字體長度

? ? ? ? ? ? if (!isTop) {

? ? ? ? ? ? ? ? totalArcAng = 90;

? ? ? ? ? ? ? ? f = "20px " + font

? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? f = "30px " + font

? ? ? ? ? ? }

? ? ? ? ? ? var fontTextLen = words.length;

? ? ? ? ? ? var radiusWidth = radiusX + context.lineWidth;

? ? ? ? ? ? var radiusHeight = radiusY + context.lineWidth;

? ? ? ? ? ? //從邊線向中心的移動因子

? ? ? ? ? ? var minRat = 1.1;

? ? ? ? ? ? //起始角度

? ? ? ? ? ? var startAngle = isTop == true ? -90 - totalArcAng / 2 : 90 - totalArcAng / 2;

? ? ? ? ? ? var step = 0.5;

? ? ? ? ? ? var alCount = Math.ceil(totalArcAng / step) + 1;

? ? ? ? ? ? var angleArr = new Array(alCount);

? ? ? ? ? ? var arcLenArr = new Array(alCount);

? ? ? ? ? ? var num = 0;

? ? ? ? ? ? var accArcLen = 0;

? ? ? ? ? ? angleArr[num] = startAngle;

? ? ? ? ? ? arcLenArr[num] = accArcLen;

? ? ? ? ? ? num++;

? ? ? ? ? ? var angR = startAngle * Math.PI / 180;

? ? ? ? ? ? var lastX = radiusX * Math.cos(angR) + radiusWidth;

? ? ? ? ? ? var lastY = radiusY * Math.sin(angR) + radiusHeight;

? ? ? ? ? ? for (var i = startAngle + step; num < alCount; i += step) {

? ? ? ? ? ? ? ? angR = i * Math.PI / 180;

? ? ? ? ? ? ? ? var x = radiusX * Math.cos(angR) + radiusWidth;

? ? ? ? ? ? ? ? var y = radiusY * Math.sin(angR) + radiusHeight;

? ? ? ? ? ? ? ? accArcLen += Math.sqrt((lastX - x) * (lastX - x) + (lastY - y) * (lastY - y));

? ? ? ? ? ? ? ? angleArr[num] = i;

? ? ? ? ? ? ? ? arcLenArr[num] = accArcLen;

? ? ? ? ? ? ? ? lastX = x;

? ? ? ? ? ? ? ? lastY = y;

? ? ? ? ? ? ? ? num++;

? ? ? ? ? ? }

? ? ? ? ? ? var arcPer = accArcLen / fontTextLen;

? ? ? ? ? ? for (var i = 0; i < fontTextLen; i++) {

? ? ? ? ? ? ? ? var arcL = i * arcPer + arcPer / 2;

? ? ? ? ? ? ? ? var ang = 0;

? ? ? ? ? ? ? ? for (var p = 0; p < arcLenArr.length - 1; p++) {

? ? ? ? ? ? ? ? ? ? if (arcLenArr[p] <= arcL && arcL <= arcLenArr[p + 1]) {

? ? ? ? ? ? ? ? ? ? ? ? ang = (arcL >= ((arcLenArr[p] + arcLenArr[p + 1]) / 2)) ? angleArr[p + 1] : angleArr[p];

? ? ? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? angR = (ang * Math.PI / 180);

? ? ? ? ? ? ? ? var x = radiusX * Math.cos(angR) + radiusX;

? ? ? ? ? ? ? ? var y = radiusY * Math.sin(angR) + radiusY;

? ? ? ? ? ? ? ? var qxang = Math.atan2(radiusY * Math.cos(angR), -radiusX * Math.sin(angR));

? ? ? ? ? ? ? ? var fxang = qxang + Math.PI / 2;

? ? ? ? ? ? ? ? var subIndex = isTop == true ? i : fontTextLen - 1 - i;

? ? ? ? ? ? ? ? var c = words[subIndex];

? ? ? ? ? ? ? ? var w = 25; var h = 31;

? ? ? ? ? ? ? ? if (!isTop) {

? ? ? ? ? ? ? ? ? ? w = 2; h = 10;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? x += (h * minRat) * Math.cos(fxang);

? ? ? ? ? ? ? ? y += (h * minRat) * Math.sin(fxang);

? ? ? ? ? ? ? ? if (isTop) {

? ? ? ? ? ? ? ? ? ? x += -w / 2 * Math.cos(qxang);

? ? ? ? ? ? ? ? ? ? y += -w / 2 * Math.sin(qxang);

? ? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? ? x += w / 2 * Math.cos(qxang);

? ? ? ? ? ? ? ? ? ? y += w / 2 * Math.sin(qxang);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? context.save()

? ? ? ? ? ? ? ? context.translate(x, y);

? ? ? ? ? ? ? ? if (isTop == true) {

? ? ? ? ? ? ? ? ? ? context.rotate((fxang * 180 / Math.PI - 90) * Math.PI / 180)

? ? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? ? context.rotate((fxang * 180 / Math.PI + 180 - 90) * Math.PI / 180)

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? context.translate(-x, -y)

? ? ? ? ? ? ? ? context.fillStyle = color;

? ? ? ? ? ? ? ? context.font = f;

? ? ? ? ? ? ? ? context.fillText(c, x, y);

? ? ? ? ? ? ? ? context.restore();

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? function writeTitle() {

? ? ? ? ? ? context.fillStyle = color;

? ? ? ? ? ? context.font = 'bolder 24px ' + Seal.baseConf.font;

? ? ? ? ? ? context.textAlign = 'center';

? ? ? ? ? ? context.fillText(sType, radiusX, radiusY + 65);

? ? ? ? ? ? context.restore();

? ? ? ? }

? ? }

}

export default Seal

第二步：導(dǎo)入新建的js文件

import Seal from "當(dāng)前文件路徑（需要自己改哦，別直接復(fù)制運行喲）";

第三步：使用

圓形公章：

let src = Seal.companySeal(

? ? ? ? "公司名字",

? ? ? ? "橫向文",

? ? ? ? "下弦文",

? ? ? ? 0,

? ? ? ? 0

? ? ? );

注：src為base64圖片字符串磁餐，直接可用img標簽加載

橢圓公章：

let src = Seal.companyEllipse(

? ? ? ? "公司名字",

? ? ? ? "橫向文",

? ? ? ? "下弦文",

? ? ? ? 0,

? ? ? ? 0

? ? ? );

src和上面的一樣喲，代碼就到此為止了阿弃，大家可直接使用诊霹。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市渣淳，隨后出現(xiàn)的幾起案子脾还，更是在濱河造成了極大的恐慌，老刑警劉巖入愧，帶你破解...
    沈念sama閱讀 212,816評論 6贊 492
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件鄙漏，死亡現(xiàn)場離奇詭異，居然都是意外死亡棺蛛，警方通過查閱死者的電腦和手機怔蚌，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評論 3贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來旁赊，“玉大人桦踊，你說我怎么就攤上這事≈粘” “怎么了钞钙？”我有些...
    開封第一講書人閱讀 158,300評論 0贊 348
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵鳄橘，是天一觀的道長。 經(jīng)常有香客問我芒炼，道長，這世上最難降的妖魔是什么术徊？ 我笑而不...
    開封第一講書人閱讀 56,780評論 1贊 285
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任本刽，我火速辦了婚禮，結(jié)果婚禮上赠涮，老公的妹妹穿的比我還像新娘子寓。我一直安慰自己，他們只是感情好笋除，可當(dāng)我...
    茶點故事閱讀 65,890評論 6贊 385
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布斜友。 她就那樣靜靜地躺著，像睡著了一般垃它。 火紅的嫁衣襯著肌膚如雪鲜屏。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 50,084評論 1贊 291
  • 城市分裂傳說
    那天国拇，我揣著相機與錄音洛史，去河邊找鬼。 笑死酱吝，一個胖子當(dāng)著我的面吹牛也殖，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播务热，決...
    沈念sama閱讀 39,151評論 3贊 410
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼忆嗜，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了崎岂？” 一聲冷哼從身側(cè)響起捆毫，我...
    開封第一講書人閱讀 37,912評論 0贊 268
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎该镣，沒想到半個月后冻璃，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 44,355評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡损合，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,666評論 2贊 327
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年省艳，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片嫁审。...
    茶點故事閱讀 38,809評論 1贊 341
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡跋炕，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出律适，到底是詐尸還是另有隱情辐烂，我是刑警寧澤遏插，帶...
    沈念sama閱讀 34,504評論 4贊 334
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站纠修，受9級特大地震影響胳嘲，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜扣草，卻給世界環(huán)境...
    茶點故事閱讀 40,150評論 3贊 317
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一了牛、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧辰妙，春花似錦鹰祸、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0贊 21
  • 一樁弒父案蛙婴，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至尔破，卻和暖如春街图，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背呆瞻。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評論 1贊 267
  • 情欲美人皮
    我被黑心中介騙來泰國打工台夺， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人痴脾。 一個月前我還...
    沈念sama閱讀 46,628評論 2贊 362
  • 代替公主和親
    正文 我出身青樓颤介，卻偏偏與公主長得像，于是被迫代替她去往敵國和親赞赖。 傳聞我的和親對象是個殘疾皇子滚朵，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,724評論 2贊 351

推薦閱讀更多精彩內(nèi)容