使用JavaScript的Canvas模拟CSS3中的background-size:cover;

语法

background-size: length|percentage|cover|contain;

值	描述	测试
length	设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。	测试
percentage	以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。	测试
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。	测试
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。	测试

var image = new Image(),
	_this = this;
image.onload = function () {
	//_this.maskCtx.drawImage(this, 0, 0);
	var width = _this.width, // 绘制宽度，使水平方向全部覆盖
		height = this.height * width / this.width, // 绘制高度，高度等比缩放
		x = 0, // 水平开始坐标
		y = (_this.height - height) / 2; // 竖直开始坐标，垂直居中
	console.log(width, height, x, y);
	if(height < _this.height) { // 竖直方向不能完全覆盖
		height = _this.height; // 使竖直方向全部覆盖
		width = this.width * height / this.height; // 宽度等比缩放
		x = (_this.width - width) / 2; // 水平方向居中
		y = 0;
	}
	console.log(width, height, x, y);
	ctx.drawImage(this, 0, 0, this.width, this.height, x, y, width, height);
}
image.src = this.cover;