小程序canvas2D绘制印章,话不多说,直接上代码

效果图:

 CanvasContext 是旧版的接口,不维护了， 新版 Canvas 2D 接口与 Web 一致

官方文档: https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.arc.html

直接上代码, 我懂:

<!--pages/test/testYZ/testYZ.wxml-->

    <text>输入公司名称：</text>

    <input type="text" placeholder="请输入公司名称" bindinput="bindInputCompany" value="{{company}}" />

    <text>章下面文字：</text>

    <input type="text" placeholder="章下面的文字" bindinput="bindKeyInput2" value="{{name}}" />

    <canvas type="2d" id="circleBar" style="width: 400rpx;height:400rpx;background: pink;margin: 30rpx auto;"></canvas>

    <button type="primary" bindtap="comCreateSeal">生成公章</button>

Page({

    data: {

      company: "江苏大熊科技有限公司",

      name: "专用章"

    },

    onShow(){

        this.comCreateSeal()

    },

    // 请输入公司名

    bindInputCompany(e) {

      this.setData({

        company: e.detail.value.trim()

      })

    },

    // 请输入章下面的文字

    bindInputName(e) {

      this.setData({

        name: e.detail.value.trim()

      })

    },

    // 生成公章

    comCreateSeal(){

        const opts = {

            company: this.data.company, // 机构名称

            companyTight: false, // 公司名称是否紧凑(//false 散开型   true紧凑)

            name: this.data.name

        }

        this.createSelectorQuery()

        .select('#circleBar')

        .fields({

          node: true,

          size: true,

        }).exec((res) => {

            console.log(res)

            const canvas = res[0].node;

            const context = canvas.getContext('2d');

            context.fillStyle = 'rgba(255, 255, 255, 0)';

          // 绘制印章边框

          canvas.width = res[0].width

          canvas.height = res[0].height

          const width=canvas.width/2;

          const height=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();

          }

        })

    }

  });

/* pages/test/testYZ/testYZ.wxss */

text{

    color: red

}

input{

    height: 100rpx;

    border: 2rpx solid #ccc;

    font-size: 36rpx;

}

帅哥, 美女 点个赞呗~

小程序canvas2D绘制印章,话不多说,直接上代码的相关教程结束。