vue实现电子印章效果

种草小妖儿.

已于 2022-12-13 20:34:11 修改

阅读量3.8k

点赞数 3

分类专栏： Vue JavaScript 文章标签： vue.js javascript 前端

于 2022-12-09 11:20:56 首次发布

本文链接：https://blog.csdn.net/S2763427717/article/details/128249763

版权

Vue 同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

JavaScript

8 篇文章 0 订阅

订阅专栏

.vue文件代码

<template>
    <div>
        <canvas id="canvas" width="200" height="200"></canvas>
    </div>
</template>
<script>
import chapter from './config/chapter'
export default {
    mounted(){
        chapter('XXX专用章','XXX科技股份有限公司')
    }
}
</script>

js文件代码

let chapter = (text, companyName) => {
  let canvas = document.getElementById("canvas");
  let context = canvas.getContext("2d");

  //let text = "XXX专用章";
  //let companyName = "XXX科技股份有限公司";

  // 绘制印章边框
  let width = canvas.width / 2;
  let 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 = 1;
  context.strokeStyle = "#f00";
  context.strokeText(text, width, height + 60);

  // 绘制印章单位
  context.translate(width, height); // 平移到此位置,
  context.font = "23px 宋体";
  let count = companyName.length; // 字数
  let angle = (4 * Math.PI) / (3 * (count - 1)); // 字间角度
  let chars = companyName.split("");
  let c;
  for (let i = 0; i < 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(); //创建路径
    // let x = Math.sin(0);
    // let y = Math.cos(0);
    let dig = (Math.PI / 5) * 4;
    for (let i = 0; i < 5; i++) {
      //画五角星的五条边
      let x = Math.sin(i * dig);
      let y = Math.cos(i * dig);
      context.lineTo(x * radius, y * radius);
    }
    context.closePath();
    context.stroke();
    context.fill();
    context.restore();
  }
};

export default chapter;