canvas生成清晰图片
首页 > >    作者:lininn   2020年9月27日 9:31 星期日   热度:152°   百度已收录  
时间:2020-9-27 9:31   热度:152° 

 绘制模糊

因为 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);


二维码加载中...
本文作者:lininn      文章标题: canvas生成清晰图片
本文地址:?post=480
版权声明:若无注明,本文皆为“覆手为雨”原创,转载请保留文章出处。
分享本文至:

返回顶部    首页    手机版本    后花园   会员注册   
版权所有:覆手为雨    站长: lininn