SOURCE

console 命令行工具 X clear

                    
>
console
(function () {
  let mainColor = "#934C0C";
  let digit = [
    '零', '壹', '贰', '叁', '肆',
    '伍', '陆', '柒', '捌', '玖'
  ];
  let unit = [
    ['元', '万', '亿'],
    ['', '拾', '佰', '仟']
  ];
  let invoiceData = {
    title: "北京市国家税务局电子发票", //发票标题
    makeOutAnInvoiceDate: "2019-12-05 16:33:24", //开票日期
    receivingUnit: "北京京东世纪信息技术有限公司", //收款单位
    mobilePhone: "18888888888", //手机号
    projectList: [{
      projectTitle: "魅族 MX4 Pro",
      unitPrice: "1000.00",
      number: 2,
      amountOf: "2000.00"
    }, {
      projectTitle: "魅族 MX2 Pro",
      unitPrice: "300.00",
      number: 2,
      amountOf: "600.00"
    }, {
      projectTitle: "魅族 MX4 Pro", //项目
      unitPrice: "1000.00", //单价
      number: 2, //数量
      amountOf: "2000.00" //金额
    }],
    remarks: "我是备注阿", //备注
    lowercaseCombin: "6999.00", //小写合计,
    uppercaseCombin: "陆仟玖佰玖拾玖圆整", //大写合计
    drawer: "系统", //开票人
    instructions: "我是说明我会好好好好对我好好回答我的户外秋冬我好奇带回去i带回去i回到屋企回到地球电话武器带回去i等会我期待期待i王大虎骑回去"
  };
  let canvas = document.querySelector('#invoiceCanvas');
  let ctx = canvas.getContext('2d');
  canvas.width = 700;
  canvas.height = 507;
  canvas.style.border = "1px solid #555";

  //框
  ctx.strokeStyle = mainColor;
  ctx.strokeRect(17.5, 115, 628, 335);
  drawText(ctx, {
    text: invoiceData.title
  })
}())

function drawText(ctx, options = {
  text: "文本",
  x: 0,
  y: 0,
  font: "18px 黑体",
  color: "#934C0C",
  textAlign: "center",
  textBaseline: "middle"
}) {
  console.log(options)
  ctx.font = "18px 黑体";//样式
  ctx.fillStyle = options.fillStyle;//颜色
  ctx.textAlign = options.textAlign;//水平对齐方式
  ctx.textBaseline = options.textBaseline;//垂直对齐方式
  ctx.fillText(options.text, options.x, options.y);//文本 x坐标,y坐标
}
<canvas id="invoiceCanvas">
        你的浏览器不支持canvas,请升级浏览器
    </canvas>