相信做前端的 對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);
 

這段程式碼在我們呼叫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);