canvas h5 高倍屏模糊

Lewis -

模糊

canvas 默认单位 px 在1倍屏上正常展示，但在 2x、3x 的手机手机上会显示模糊。canvas 的 width、height 属性是画布尺寸，css 是元素尺寸，因为元素尺寸会在 2x、3x 屏幕上放大 2、3 倍，所以会变模糊。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    #canvas {
      background: #999
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="160px" height="96px"></canvas>
</body>
<script>
    const canvas = document.querySelector('#canvas')
    let ctx = canvas.getContext('2d')

    ctx.setTransform(1, -0.52, 0, 1, 60, 60);
    ctx.font = '40px STHeiTi, SimHei'
    ctx.fillStyle="#fff";
    ctx.textAlign = 'center'
    ctx.fillText('¥33.5', 21, 15)
</script>
</html>

这是一个示例：模拟手机端 2x 的情况

JS Bin

解决方式

可以将 canvas 的 width、height 属性放大 2x 或者 3x，元素尺寸不变（px 单位会根据屏幕 dpi 缩放）这样就可以显示清晰的画面

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    #canvas2 {
      background: #19BAFF ;
      width: 160px;
      height: 96px;
    }
  </style>
</head>
<body>
   <canvas id="canvas2" width="320px" height="192px"></canvas>
</body>
<script>
    const canvas2 = document.querySelector('#canvas2')
    let ctx2 = canvas2.getContext('2d')

    ctx2.setTransform(1, -0.52, 0, 1, 130, 120);
    ctx2.font = '80px STHeiTi, SimHei'
    ctx2.fillStyle="#fff";
    ctx2.textAlign = 'center'
    ctx2.fillText('¥33.5', 21, 15)
</script>
</html>
JS Bin