HTML5用图片生成canvas画布,为什么图片会模糊?

发布网友 发布时间：2022-04-23 14:09

我来回答

共4个回答

热心网友 时间：2022-04-20 00: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，如下：

ctx.drawImage(document.querySelector('img'), 10, 10, 300 * ratio, 90 * ratio);

热心网友 时间：2022-04-20 01:33

尺寸长了吧，canvas画布是canvas标签，你的图片是背景的意思吧

热心网友 时间：2022-04-20 03:07

网页链接

热心网友 时间：2022-04-20 04:59

没学过html5