canvas 实现图片环绕杯子，仿psd中的变形命令，实现图片的扭曲变形

我们平常用ps中通过变形命令来修改图片的，让其契合到杯子上面，如果我们要用canvas怎样制作呢？ ps 中的示例

我遇到的需求是完成一个杯子的实时效果图预览，就需要实现这种弯曲的效果，先上代码，然后再讲解原理 `

<head>
	<meta charset="UTF-8">
	<title></title>
</head>

<body>
	<canvas id="canvas"></canvas>
	<p>请选择一张图片绘制在杯子上</p>
	<input type='file' id='change' />
</body>
<script src='js/jquery-3.1.1.min.js'></script>
<script>
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");

	var img = new Image();
	img.onload = start;

	var productImg = new Image();
	productImg.onload = function() {
		var iw = productImg.width;
		var ih = productImg.height;
		canvas.width = iw * 2 / 3;
		canvas.height = ih * 2 / 3;
		ctx.drawImage(productImg, 0, 0, productImg.width * 2 / 3, productImg.height * 2 / 3);
	};
	productImg.src = "img/cola.jpeg";

	$(function() {
		$('#change').on('change', function(ev) {

			var reader = new FileReader();
			var file = this.files[0];

			reader.onload = function(ev) {
                                    self.option.sizeMax, function(dataURL, blob) {
				img.src = ev.target.result
			}
			reader.readAsDataURL(file);
		})
	})

	function start() {
		var iw = img.width;
		var ih = img.height;

		var xOffset = 190,
			yOffset = 212;

		var a = 80.0;
		var b = 15.0;

		var scaleFactor = iw / (2 * a);


		for(var X = 0; X < 2 * a; X++) {
			var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation
			for(var Y = 0; Y < 194 + y * 2; Y++) {
				var _scaleFactor = ih / (194 + y * 2);
				var scaleFactor = iw / (2 * a - Y / 5);
				if(Y < X * 10 && Y < -10 * X + 2 * a * 10) { //Y<x*10
					ctx.drawImage(img, (X - Y / 10) * scaleFactor , Y * _scaleFactor, 1, 1, X + xOffset, y + yOffset + Y, 1, 1);
				}
			}

		}
		//封边，绘制线段遮住毛糙
		ctx.beginPath();
		ctx.moveTo(xOffset, yOffset);
		ctx.lineTo(xOffset + 226 / 10, yOffset + 226);
		ctx.strokeStyle = '#fff';
		ctx.lineWidth = 3;
		ctx.stroke();

		ctx.beginPath();
		ctx.moveTo(xOffset + 2 * a + 1, yOffset);
		ctx.lineTo(xOffset + 2 * a + 1 - 226 / 10, yOffset + 226);
		ctx.strokeStyle = '#fff';
		ctx.lineWidth = 3;
		ctx.stroke();

		ctx.beginPath();
		ctx.moveTo(xOffset, yOffset + 1);
		ctx.bezierCurveTo(xOffset + a / 2 - 10, yOffset + 20, xOffset + a * 3 / 2 + 15, yOffset + 20, xOffset + 2 * a, yOffset + 1);
		ctx.strokeStyle = 'rgb(230,230,230)';
		ctx.lineWidth = 3;
		ctx.stroke();

		ctx.beginPath();
		ctx.moveTo(xOffset + 226 / 10, yOffset+226-1);
		ctx.bezierCurveTo(xOffset + 226 / 10 + a / 2 -5, yOffset+226 + 18, xOffset + 226 / 10 + a * 3 / 2 - 35, yOffset+226 + 18, xOffset + 226 / 10 +  a*3/2-3, yOffset+226 -1);
		ctx.strokeStyle = '#fff';
		ctx.lineWidth = 3;
		ctx.stroke();

	}
</script>