vue实现电子印章效果

原创

已于 2022-12-13 20:34:11 修改 · 4.7k 阅读

36 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

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

.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