canvas生成清晰图片
绘制模糊
因为
canvas不是矢量图，而是像图片一样是位图模式的。高dpi显示设备意味着每平方英寸有更多的像素。也就是说二倍屏，浏览器就会以2个像素点的宽度来渲染一个像素，该canvas在Retina屏幕下相当于占据了2倍的空间，相当于图片被放大了一倍，因此绘制出来的图片文字等会变模糊。 因此，要做Retina屏适配，关键是知道当前屏幕的设备像素比，然后将canvas放大到该设备像素比来绘制，然后将canvas用css设置为屏幕的大小来展示。
解决思路：
在浏览器的 window 对象中有一个 devicePixelRatio 的属性，该属性表示了屏幕的设备像素比，即用几个像素点宽度来渲染1个像素。
类似的，在 canvas context 中也存在一个 backingStorePixelRatio 的属性，该属性的值决定了浏览器在渲染canvas之前会用几个像素来来存储画布信息。 backingStorePixelRatio 属性在各浏览器厂商的获取方式不一样，所以需要加上浏览器前缀来实现兼容。
代码实现：
let devRatio = window.devicePixelRatio || 1, // 获取设备像素比 // ctx的像素比 backingStore = ctx.backingStorePixelRatio ||
ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1; const ratio = devRatio / backingStore; // canvas放大像素比倍 $JPoster.setAttribute('width', winW * ratio);
$JPoster.setAttribute('height', winH * ratio); // canvas 放大后，相应的绘制图片也要放大 ctx.scale(ratio, ratio);
相关文章
