小程序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
        }
　　　　　

setTimeout(() => {  // 这边需要加个延时器,不加的话 和老的canvas一样的问题, 部分手机生成空白; 不信你试试

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();             
          }
        })

}, 500);

    }  
  });

/* pages/test/testYZ/testYZ.wxss */
text{
    color: red
}
input{
    height: 100rpx;
    border: 2rpx solid #ccc;
    font-size: 36rpx;
}

帅哥, 美女 点个赞呗~