enrole a imagem em torno de um copo cilíndrico usando tela html 5 e javascript
Meu objetivo é envolver uma imagem sobre uma caneca de café virtualmente usando HTML5 e javascript.
Eu criei um protótipo:http://jsfiddle.net/sandeepkum88/uamov2m7/
Atualmente, estou cortando a imagem em tiras de 1px de largura e depois colocando essas tiras na curva de bezier.
var img = new Image();
img.onload = start;
img.src = "http://in-sandeep.printvenue.org/test-images/mug-strap.png";
var pointer = 0;
function start() {
var iw = 198.97826;
var ih = img.height;
var x1 = 50;
var y1 = 40;
var x2 = 97;
var y2 = 60;
var x3 = 152;
var y3 = 40;
// calc unit value for t to calculate bezier curve
var unitT = 1 / iw;
// put image slices on the curve
for (var X = 0, t = 0; X < iw; X++, t+=unitT) {
var xTop = (1-t) * (1-t) * x1 + 2 * (1 - t) * t * x2 + t * t * x3;
var yTop = (1-t) * (1-t) * y1 + 2 * (1 - t) * t * y2 + t * t * y3;
ctx.drawImage(img, X + pointer, 0, 1, ih, xTop, yTop, 0.85, ih-188);
}
}
Mas não estou satisfeito com o resultado.
Estou fazendo errado em algum lugar? Existe alguma alternativa melhor. E se a curva superior e a inferior forem diferentes.
Existe uma maneira de conseguir isso usando a matriz de transformação?