标签：canvas container text ctx height width 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();
}

效果

标签：canvas,container,text,ctx,height,width,demo,春联
来源： https://blog.csdn.net/qq_40850839/article/details/122716408

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。