关于使用canvas画图时，图片被拉伸的问题

Posted 2023-05-09

参考技术A 如果您觉得我的文章有用，欢迎点赞和关注，也欢迎光临我的个人博客 https://github.com/BokFang

canvas元素可以用来画2D图形，我们通过写js来完成任务。
首先，我们在html文件中写入：

然后在css中给canvas一个背景颜色：

此时浏览器中是这样的：

正如我们所看到的，canvas的默认值是宽300高150。我想把画布变为正方形，所以在css中加入width:300px;height:300px。接着我们在上面画圆。

却发现圆被拉伸为椭圆了。

canvas是由一张画板和一张画纸铺成的,画板相当于一个容器，我们在画纸上作画。当画纸与画板宽高不相等时，图形就会被拉伸。

1.在html标签中设置canvas属性：

2.在js中设置：

使用 canvas 画图时图像文字模糊的解决办法

最近在使用 canvas 画图的时候，遇到了图像文字模糊的问题，解决思路就是根据分辨率绘制不同尺寸的画布。以下是创建高分辨率画布的代码：

/**
 * 创建高分辨率画布
 * @param w     画布宽
 * @param h     画布高
 * @param ratio 屏幕分辨率
 */
function createHiDPICanvas(w, h, ratio?) {

  const PIXEL_RATIO = (function () {
    const c = <HTMLCanvasElement>document.createElement("canvas"),
      ctx = c.getContext("2d"),
      dpr = window.devicePixelRatio || 1,
      bsr = ctx['webkitBackingStorePixelRatio'] ||
        ctx['mozBackingStorePixelRatio'] ||
        ctx['msBackingStorePixelRatio'] ||
        ctx['oBackingStorePixelRatio'] ||
        ctx['backingStorePixelRatio'] || 1;

    return dpr / bsr;
  })();

  if (!ratio) { ratio = PIXEL_RATIO; }
  const can = document.createElement("canvas");
  can.width = w * ratio;
  can.height = h * ratio;
  can.style.width = w + "px";
  can.style.height = h + "px";
  can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);
  return can;
}

// 不创建高分辨率画布
const canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 100;

// 创建使用默认分辨率的画布
const myCanvas = this.createHiDPICanvas(100, 100);

// 创建分辨率为 3 的画布
const myCustomCanvas = this.createHiDPICanvas(100, 100, 3);

最后，贴一个高分辨率画布的开源库
https://github.com/jondavidjohn/hidpi-canvas-polyfill