html如何让图片弯曲,如何在html5画布中弯曲/弯曲图像

我有

我想这样做

到

HTML

JS

var temp_can1, temp_can1_ctx;

$(document).ready(function () {

temp_can1 = document.getElementById('mycanvas');

temp_can1_ctx = temp_can1.getContext('2d');

var imageObj_rotator3 = new Image();

imageObj_rotator3.onload = function () {

temp_can1_ctx.drawImage(imageObj_rotator3, 0, 0);

temp_can1_ctx.globalCompositeOperation = "source-atop";

var pattern = temp_can1_ctx.createPattern(imageObj_rotator3, 'no-repeat');

temp_can1_ctx.rect(0, 0, temp_can1.width, temp_can1.height);

temp_can1_ctx.fillStyle = pattern;

temp_can1_ctx.fill();

temp_can1_ctx.globalAlpha = 0.10;

temp_can1_ctx.drawImage(imageObj_rotator3, 0, 0);

temp_can1_ctx.drawImage(imageObj_rotator3, 0, 0);

temp_can1_ctx.drawImage(imageObj_rotator3, 0, 0);

};

imageObj_rotator3.src = 'http://i.stack.imgur.com/o8EJp.png';

});

这可以在html5 canvas中完成。如果可能的话，请告诉我一些方向/例子。

谢谢