您的位置:首页 > 其它

canvas在电脑手机屏上被自动放大显示不正常问题

2016-04-12 17:27 525 查看
canvas在高清电脑屏上或者手机上显示不正常,其原因是被自动放大变模糊了,所以需要根据不同的手机的devicePixelRatio来进行缩放canvas。

解决方案:(同时利用style.width,style.height,width,height可控制缩放效果,因为这是canvas.style.width跟canvas.width所导致的问题。)

canvas.style.width是浏览器渲染canvas的尺寸,而canvas.width是canvas的画布大小。

主要代码如下:

var tWid = window.devicePixelRatio;//获取设备像素比

var canvas = document.getElementById('myCanvas'); //获取canvas对象

if (canvas) {
canvas.width = parseInt(canvas.width) * tWid;
canvas.height = parseInt(canvas.height) * tWid;
canvas.style.width = parseInt(canvas.style.width) * tWid + "px";
canvas.style.height = parseInt(canvas.style.height) * tWid + "px";
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: