Canvas

Garbrielle

已于 2024-07-25 18:49:15 修改

阅读量10

点赞数

分类专栏：前端小技巧文章标签： javascript 前端 html

于 2022-09-19 14:44:43 首次发布

本文链接：https://blog.csdn.net/garbrielle/article/details/125141448

版权

前端小技巧专栏收录该内容

3 篇文章 0 订阅

订阅专栏

海报

canvas模糊

canvas绘图是基于自身的宽高设置，必须明确指定宽高，不能使用百分比。如果出现线条锯齿状原因，一般都是因为，canvas的css样式放大了原本的canvas图形导致的.（canvas绘图默认是300*150px）

css将canvas放大一倍，导致图像不清晰。

<canvas width="200" height="100" style={{width:400,height:200}}></canvas>

所以在开始时计算canvas的宽高，然后动态赋值给canvas自身的宽高设置

<canvas id="pic" :width="width" :height="height"></canvas>
data() {
      return {
        width: document.documentElement.clientWidth / 2,
        height: document.documentElement.clientHeight,
      };
    },

问题出现是我通过css class给canvas设置了宽高，然后图片根据宽高计算绘制图片宽高计算正确，然后canvas整体被css给拉伸到设置的宽高，所以导致现象是图片高度设置的有误，canvas内的所有都模糊，几何属性设置正确渲染有误。

文字居中

drawFooter(ctx, rect) {
// 计算高度
  let height = basicSet.footer.top + basicSet.footer.bottom + 16;
  // y
  let top = rect.height - height;
  // 绘制矩形区域
  ctx.fillStyle = "#999";     
  ctx.fillRect(0, top, rect.width, height);     
  // 文字设置
  ctx.fillStyle = basicSet.footer.color;
  ctx.font = basicSet.footer.font;
  // 设置居中
  ctx.textAlign = basicSet.footer.textAlign;
  ctx.textBaseline = 'middle'
  console.log(top);
  // fillText设置x, y 为矩形w, h的一半
  ctx.fillText(content.footer.text, rect.width / 2, top + basicSet.footer.top);
}