html5的canvas怎么调整画图的清晰度
答案:1 悬赏:80
解决时间 2021-01-27 19:04
- 提问者网友:夢醒日落
- 2021-01-27 04:01
html5的canvas怎么调整画图的清晰度
最佳答案
- 二级知识专家网友:醉吻情书
- 2021-01-27 04:15
不光绘制图片,在高分屏下,绘制文字和线条都会出现模糊的现象,GitHub上有一个hidpi-canvas-polyfill可以很好的解决这个问题,但是没有对图片进行处理。如果你了解了原因,解决这个问题也很容易。
首先,引入上方这个polyfill;
然后,得到devicePixelRatio和backingStorePixelRatio的比例,可以使用下面的方法
var getPixelRatio = function(context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
//调用
var ratio = getPixelRatio(ctx);
之后,在调用ctx.drawImage()的时候,给width和height乘以ratio,如下:
1
ctx.drawImage(document.querySelector('img'), 10, 10, 300 * ratio, 90 * ratio);
首先,引入上方这个polyfill;
然后,得到devicePixelRatio和backingStorePixelRatio的比例,可以使用下面的方法
var getPixelRatio = function(context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
//调用
var ratio = getPixelRatio(ctx);
之后,在调用ctx.drawImage()的时候,给width和height乘以ratio,如下:
1
ctx.drawImage(document.querySelector('img'), 10, 10, 300 * ratio, 90 * ratio);
我要举报
如以上问答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
大家都在看
推荐资讯