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

相信做前端的 对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 上 才会出现这个问题。