解决canvas绘图很虚的方法

转载 2015年11月17日 16:58:07
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填充


相关文章推荐

使用canvas画图,图形模糊怎么办

在说解决办法之前,例行惯例,简要的说明一下Html5中的Canvas。Canvas是Html5制图中常用的元素,但其本身并没有绘制能力,它仅仅是图形的容器,要制图还必须依靠脚本。按照Canvas中提供...
  • LeyYang
  • LeyYang
  • 2016年08月18日 22:15
  • 5891

字符串与数组的相关操作

字符串的使用: var s = "hello,word"; s.charAt( 0 )                       //“h”:第一个字符 s.charAt( s.length...

javascript+CSS3 3D游戏/效果

因为是学习Web前端的,对前端知识技术也十分关注。要做一个3D游戏时,我第一想到的就是HTML5+CSS3技术,可以这样说:Web的未来属于HTML5。再搭配javascript,基本可以能实现你所想...

android绘图canvas.clipRect()方法的作用

该方法用于裁剪画布,也就是设置画布的显示区域 调用clipRect()方法后,只会显示被裁剪的区域,之外的区域将不会显示 该方法最后有一个参数Region.Op,表示与之前区域的区域间运算种类,如...

android绘图canvas.drawBitmap方法的作用

canvas.drawBitmap()有两个重载方法 和 第一个比较简单,我们着重看第二个 四个参数 Bitmap bitmap:要绘制的位图对象 Rect src: 是对图片进行裁...

android绘图Paint.setXfermode()和Canvas.saveLayer()方法的作用

在android绘图开发中,Paint.setXfermode()和Canvas.saveLayer()是两个重要的方法了。很多网友都不是很明白,我也一直不明白,花了几天时间来研究了这两个方法,略有领...

cocos2dx js 关于canvas绘图模糊问题及解决办法

最近做了一个项目,发现同一张图,在大部分安卓手机里图片很模糊,而在ios设备里显示清晰。开始我以为是图片的问题或者是手机性能的原因,但即使把图片做的再大,再清楚也还是模糊。 为此苦恼了好几天。 后...

cocos2dx js 关于canvas绘图模糊问题及解决办法

最近做了一个项目,发现同一张图,在大部分安卓手机里图片很模糊,而在ios设备里显示清晰。开始我以为是图片的问题或者是手机性能的原因,但即使把图片做的再大,再清楚也还是模糊。 为此苦恼了好几天。 后...

HTML5-canvas绘图黑屏白屏解决方案(详解双缓冲绘图机制)

HTML5-canvas绘图黑屏白屏解决方案(详解双缓冲绘图机制) 使用canvas绘图的前端工程师可能都会遇到过canvas绘图黑屏、白屏的问题。以前写过一篇文章描述过hybrid下canvas黑...
  • yuhk231
  • yuhk231
  • 2017年01月12日 11:11
  • 2173

canvas绘图实现实时时钟效果

  • 2016年01月26日 11:51
  • 2KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:解决canvas绘图很虚的方法
举报原因:
原因补充:

(最多只允许输入30个字)