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

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

 ps 中的示例

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

	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);//			img.src='/img/test/i.jpg';};productImg.src = "img/cola.jpeg";$(function() {$('#change').on('change', function(ev) {
//				console.log(ev);var reader = new FileReader();var file = this.files[0];
//				console.log(file)reader.onload = function(ev) {//self.imagePress(ev.target.result, self.option.sizeMax, function(dataURL, blob) {//					console.log(ev.target.result);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 equationfor(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*10ctx.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();

如果正常的运行起来那么会得到这样一张图

 有了明显的下弧的感觉

要实现这种弧度首先要分两步方法来操作

主要思路就是先绘制出杯子的轮廓，然后将对应位置比例的图片贴上去。先来绘制带有上下半椭圆的形状:

 看上图我们可以知道我们只需要把原图按照竖形切割，然后绘制出具有上下半椭圆的形状，把对应位置的图片贴过来就好了，现在来看看如何绘制具有上下半圆的这个形状：

看了上面的椭圆的计算方式，还有下面一个椭圆，下面一个椭圆就稍微简单点，看看它和上面的椭圆有什么关系：

 刚才大致了解对于椭圆是如何切割的，现在看看椭圆+斜边是如何切割的，这个相比只是椭圆切割要复杂一点，会同时对垂直进行切割：

 现在来看看左右两根线的方程，一个是y=10*x,一个是y=20*a-10*x;

 至此我们就完成了全部的图片绘制，此代码的应用场景就是圆柱体，但是遇到特殊的透视关系上，还是不够灵活，如果能直接解析psd中的变形命令，通过替换智能图层的方式实现会更加的灵活

我最近发现了一下能实现这种想法的网站，分享给大家，有兴趣的同学可以试一试

程序替换PSD智能图层https://foxpsd.com/https://foxpsd.com/