[html] 第218天 canvas怎么解决图片和文字模糊的问题？

[haizhilin2013]

第218天 canvas怎么解决图片和文字模糊的问题？

我也要出题

[simplefeel]

1. 模糊问题的根源是dpr的不同导致
2. 解决思路: canvas视图尺寸相同的情况下，canvas画布放大dpr倍，最终画出来的图片相当于缩小了dpr倍，然后通过ctx.scale(dpr,dpr)还原大小

[forever-z-133]

创建一个更大的临时 canvas2, 把 canvas1 画上去，
再用 drawImage 的后几个参把 canvas2 画到 canvas1 上去。

[jian-x-lan]

---html---
<canvas id="myCanvas"
width="1500px"
height="2688px"
style="width:138px;height:246px">

---js---
ctx.drawImage(img, 0, 0, 1500, 2688);

设置canvas的width和height为图片的原始尺寸，再设置css样式使得页面展示为正常尺寸。