canvas:绘制简单春联demo

HTML

页面上显示上联和下联输入框，绘制按钮和生成图片按钮

 <div class="container">
    <div class="container_up">
      <div class="container_up_label">上联</div>
      <div class="container_up_value"><input type="text" class="container_up_value_input"></div>
    </div>
    <div class="container_down">
       <div class="container_down_label">下联</div>
       <div class="container_down_value"><input type="text" class="container_down_value_input"></div>
    </div>
    <div class="container_controls">
        <button class="container_controls_btn">生成春联</button>
        <button class="container_controls_btn">导出为图片</button>
        <!-- <a class="container_controls_download" href="">点击下载图片</a> -->
    </div>
  </div>
  <div class="container">
    <canvas class="container_up_canvas" width="500" height="100" id="upCan"></canvas>
    <canvas class="container_down_canvas" width="500" height="100" id="downCan"></canvas>
  </div>

CSS

对页面上的元素进行布局设置样式

.container {
  width: 500px;
  height: 200px;
  margin: 0 auto;
}

.container_down,
.container_up {
  width: 100%;
  height: 50px;
  margin: 10px 0;
  display: flex;
  align-items: center;
}

.container_down_label,
.container_up_label {
  margin-right: 20px;
  width: 50px;
  height: 100%;
}

.container_down_value,
.container_up_value {
  flex: 1;
  height: 100%;
}

.container_controls {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 20px;
}

.container_controls_btn {
  width: 100px;
  height: 50px;
  display: block;
  border: none;
  outline: none;
  margin: auto;
}

.container_controls_download {
  width: 100px;
  height: 50px;
  color: inherit;
  text-decoration: none;
}

.container_down_value_input,
.container_up_value_input {
  height: 100%;
  border: 1px solid #ebebeb;
  outline: none;
  width: 100%;
}

.container_down_canvas,
.container_up_canvas {
  margin: 0 auto;
  border: 1px solid #ebebeb;
  background-color: #ff0000;
}

JS

let upInput = document.getElementsByClassName('container_up_value_input')[0],
  downInput = document.getElementsByClassName('container_down_value_input')[0],
  upCtx = document.getElementById('upCan').getContext('2d'),
  downCtx = document.getElementById('downCan').getContext('2d'),
  btn = document.getElementsByClassName('container_controls_btn')[0],
  toImgBtn = document.getElementsByClassName('container_controls_btn')[1],
  downLoad = document.getElementsByClassName('container_controls_download')[0],
  controls = document.getElementsByClassName('container_controls')[0];

// 获取用户输入的文字
upInput.addEventListener('input', function (e) {
  localStorage.setItem('upText', e.target.value);
});
downInput.addEventListener('input', function (e) {
  localStorage.setItem('downText', e.target.value);
});
// 绘制图片操作
btn.addEventListener('click', function () {
  let upText = localStorage.getItem('upText');
  let downText = localStorage.getItem('downText');
  console.log(upText, downText)
  drawBg(upCtx);
  drawText(upCtx, upText);
  drawBg(downCtx);
  drawText(downCtx, downText);
});

// 执行生成图片操作
toImgBtn.addEventListener('click', function () {
  upCtx.canvas.toBlob(blob => {
    downLoadImg(window.URL.createObjectURL(blob), '点击下载上联');
  });
  downCtx.canvas.toBlob(blob => {
    downLoadImg(window.URL.createObjectURL(blob), '点击下载下联');
  });
});

/**
 * 绘制春联文字
 * @param {object} ctx CanvasContextObject
 * @param {string} text 春联的文字
 * @returns 
 */
function drawText(ctx, text) {
  if (!text.length) return;
  ctx.fillStyle = 'rgb(255,215,100)';
  ctx.font = "50px 楷体";
  ctx.textBaseline = 'middle';
  ctx.textAlign = 'start';
  let textLeft = 20;
  let textTop = ctx.canvas.height / 2;
  for (let i = 0, len = text.length; i < len; i++) {
    if (textLeft >= ctx.canvas.width) {
      ctx.canvas.width = text.length * 70 + 20;
    }
    ctx.fillText(text[i], textLeft, textTop);
    textLeft += 70;
  }
}
/**
 * 绘制背景
 * @param {object} ctx CanvasContextObject
 */
function drawBg(ctx) {
  ctx.save();
  ctx.fillStyle = '#ff0000';
  ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.fill();
  ctx.restore();
}

/**
 * @function 生成下载图片链接
 * @param {string} url 图片链接地址
 * @param {string} text a标签的显示内容
 */
function downLoadImg(url, text) {
  console.log(url)
  let a = document.createElement('a');
  a.href = url;
  a.className = 'container_controls_download';
  a.innerHTML = text;
  a.target = '_blank';
  a.click();
}

效果