解决canvas绘图很虚的方法

if (window.devicePixelRatio) {
  <span style="white-space:pre">	</span>var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
   	var.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
 	this.canvas.style.width = width + "px";
    <span style="white-space:pre">	</span>this.canvas.style.height = height + "px";
    <span style="white-space:pre">	</span>this.canvas.height = height * window.devicePixelRatio;
   <span style="white-space:pre">	</span>this.canvas.width = width * window.devicePixelRatio;
    <span style="white-space:pre">	</span>ctx.scale(window.devicePixelRatio, window.devicePixelRatio);//根据DPR缩放
}


原理:

屏幕的DPR不同导致,需要按照当前DPR填充


阅读更多
个人分类: js相关
上一篇css3+html5滚图片
下一篇纯js判断UA
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭