canvas生成清晰图片 canvas生成清晰图片

canvas生成清晰图片

 绘制模糊

因为 canvas 不是矢量图,而是像图片一样是位图模式的。高dpi 显示设备意味着每平方英寸有更多的像素。也就是说倍屏,浏览器就会以2个像素点的宽度来渲染一个像素,该 canvasRetina 屏幕下相当于占据了2倍的空间,相当于图片被放大了一倍,因此绘制出来的图片文字等会变模糊。 因此,要做 Retina 屏适配,关键是知道当前屏幕的设备像素比,然后将 canvas 放大到该设备像素比来绘制,然后将 canvascss设置为屏幕的大小来展示。

解决思路: 在浏览器的 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);


分享本文至:

评论 0

挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论