canvas实现一个票据，并下载为图片

最新推荐文章于 2024-02-24 15:11:44 发布

阿信呐

最新推荐文章于 2024-02-24 15:11:44 发布

阅读量257

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45921734/article/details/131009323

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .btn{
        width: 100px;
        height: 60px;
        background: #2ecc40;
        margin:50px 100px;
      }
    </style>
</head>
<body>
  <canvas id="receipt" width="500" height="350"></canvas>
  <div>
    <button id="download-btn" class="btn">下载票据</button>

  </div>
</body>
<script>
const canvas = document.getElementById('receipt');
const ctx = canvas.getContext('2d');

// 绘制背景
ctx.fillStyle = '#9F9C93'
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 绘制标题
ctx.fillStyle = '#000';
ctx.font = 'bold 24px Arial';
ctx.fillText(`收        据`, 180, 40);

// 绘制外边框
ctx.fillStyle = '#9F9C93'
ctx.fillRect(20, 80, 450, 190)
ctx.strokeStyle = "#000"; // 设置线条颜色为黑色
ctx.lineWidth = 2; // 设置线条宽度为5px
ctx.strokeRect(20, 80, 450, 190); // 使用当前的线条颜色和宽度绘制一个矩形边框
// 生成一个随机的号码
const NO = Math.floor(Math.random()*100000000)

// 绘制编号
ctx.font = 'bold 18px Arial'
ctx.fillStyle = '#935750'
ctx.fillText(`NO:${NO}`,330,40)

// 绘制日期
const date = new Date();
ctx.fillStyle = '#000'
ctx.font = '14px Arial';
ctx.fillText(`日期：${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`, 180, 65);

// 绘制横线函数
function drawHorizontalLine(ctx, x, y, length) {
  ctx.lineWidth = 1
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + length, y);
  ctx.stroke();
}

// 绘制内容
ctx.fillStyle = '#C93756'
ctx.fillText('交款单位（交款人）：',30,120)
ctx.fillStyle = '#000'
ctx.fillText('深圳迈瑞生物医疗有限公司：',180,120)
drawHorizontalLine(ctx,20,140,450)

ctx.fillStyle = '#C93756'
ctx.fillText('摘由：',30,170)
drawHorizontalLine(ctx,20,190,450)

ctx.fillText('金额（大写）：',30,220)
ctx.fillStyle = '#000'
ctx.fillText(' 壹百万元',130,220)

drawHorizontalLine(ctx,20,240,450)
ctx.fillStyle = '#C93756'
ctx.fillText('收款单位：',30,290)
ctx.fillStyle = '#000'
ctx.fillText('深圳腾讯科技有限公司',100,290)
ctx.fillStyle = '#C93756'
ctx.fillText('复核人：',350,290)
ctx.fillStyle = '#000'
ctx.fillText('ashin',410,290)

// 设置圆心坐标及半径
const centerX = 180;
const centerY = 280;
const radius = 50;

// 绘制圆形
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.strokeStyle = '#FF0000';
ctx.lineWidth = 5;
ctx.stroke();

// 绘制文字
const text = '深圳腾讯科技有限公司';
ctx.font = '13px Arial';
ctx.fillStyle = '#FF0000';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
for (let i = 0; i < text.length; i++) {
  const angle = i * (2 * Math.PI / text.length);
  const x = centerX + (radius * 0.8) * Math.cos(angle);
  const y = centerY + (radius * 0.8) * Math.sin(angle);
  ctx.fillText(text[i], x, y);
}

const stampImg = new Image();
stampImg.src = 'path/to/stamp/image.png';
stampImg.onload = () => {
ctx.drawImage(stampImg, 250, 200, 100, 100);
}
const downloadBtn = document.getElementById('download-btn');
downloadBtn.addEventListener('click', () => {
const dataUrl = canvas.toDataURL('image/png');
const a = document.createElement('a');
a.href = dataUrl;
a.download = 'receipt.png';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});

</script>
</html>