canvas h5 高倍屏模糊
模糊
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 的情况
解决方式
可以将 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>
