hidpi-canvas-polyfill.js 多次调用canvas.getContext('2d') 导致画布放大问题

最新推荐文章于 2025-12-29 13:02:54 发布

原创最新推荐文章于 2025-12-29 13:02:54 发布 · 5.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 canvas #hidpi-canvas.js #canvas放大

本文介绍hidpi-canvas-polyfill.js在多次调用canvas.getContext('2d')时导致canvas元素异常放大的问题及修复方法。通过添加判断条件避免重复放大。

相信做前端的对hidpi-canvas-polyfill.js 都不陌生；

手机端的高清屏上用canvas 画图，大部分都用到了hidpi-canvas-polyfill.js ；

这个包在高清屏上很好用，但在使用时可能也会遇到一些问题。

我在使用时就遇到一个，和大家分享一下。

(function(prototype) {
	prototype.getContext = (function(_super) {
		return function(type) {
			var backingStore, ratio,
				context = _super.call(this, type);

			if (type === '2d') {

				backingStore = context.backingStorePixelRatio ||
							context.webkitBackingStorePixelRatio ||
							context.mozBackingStorePixelRatio ||
							context.msBackingStorePixelRatio ||
							context.oBackingStorePixelRatio ||
							context.backingStorePixelRatio || 1;

				ratio = (window.devicePixelRatio || 1) / backingStore;

				if (ratio > 1) {
					this.style.height = this.height + 'px';
					this.style.width = this.width + 'px';
					this.width *= ratio;
					this.height *= ratio;
				}
			}

			return context;
		};
	})(prototype.getContext);
})(HTMLCanvasElement.prototype);

这是 hidpi-canvas.js 中的一段代码，

这段代码在我们调用canvas.getContext("2d")时被执行。当调用一次时一切正常，但调用多次，就会有问题。它会把 canvas 元素放大到原来的几倍。

解决方案：

(function(prototype) {
	prototype.getContext = (function(_super) {
		return function(type) {
			var backingStore, ratio,
				context = _super.call(this, type);

			if (type === '2d') {

				backingStore = context.backingStorePixelRatio ||
							//context.webkitBackingStorePixelRatio ||
							context.mozBackingStorePixelRatio ||
							context.msBackingStorePixelRatio ||
							context.oBackingStorePixelRatio ||
							context.backingStorePixelRatio || 1;

				ratio = (window.devicePixelRatio || 1) / backingStore;

				if (ratio > 1&&$(this).attr("val")!="true") {
					if((this.style.height == '' || Number(this.style.height.replace('px', '')) * ratio != this.height)) {
						this.style.height = this.height + 'px';
						this.style.width = this.width + 'px';
						this.width *= ratio;
						this.height *= ratio;
						$(this).attr("val",true)
					}
				}
			}

			return context;
		};
	})(prototype.getContext);
})(HTMLCanvasElement.prototype);

在上面加一个判断，这样多次获取canvas.getContext("2d") 时就不会吧canvas 元素放大很多倍了。现在测试只在 Android 6 原生的 WebView 上才会出现这个问题。