答案 0 :(得分:2)
使用距水平中心的距离将正弦波应用于图像比例。你只需要部分sin波(PI / 2到PI)或(cos 0到PI / 2)
var img = new Image;
img.src = "//i.stack.imgur.com/UvqUP.gif";
var ctx = can.getContext("2d");
img.onload = function () {
var w,h,ch,cw,amount,x,scale;
w = can.width = this.width;
h = can.height = this.height;
cw = w / 2;
ch = h / 2;
amount = 50; // amount to bend in pixels
amount *= 1 / ch; // convert to unit scale
for(var x = 0; x < w; x++) {
scale = 1.0 - (Math.cos(((cw - x) / cw) * Math.PI * 0.5)) * amount;
ctx.drawImage(this, x, 0, 1, h, x, ch - ch * scale , 1, h * scale);
}
}
&#13;
<canvas id="can"></canvas>
&#13;
答案 1 :(得分:2)
您可以稍微修改my previous answer并将半角sin范围应用于宽度(或高度)作为偏移量,然后取该偏移量x 2并从新线的总高度中减去。
sin()函数将接受输入并在[0.0,1.0]之间产生一个新值。通常你会组合sin + cos来产生一个圆,但我们只需要一个轴的值,因为我们只需要更多的椭圆形状,我们用一个小于半径的值进行缩放(图像大小代表轴上的直径你'之后'。
因此,我在另一个答案中对代码进行了几处修改:
var ctx = c.getContext("2d"); // just some inits for demo
var img = new Image;
img.onload = slice;
img.src = "//i.stack.imgur.com/UvqUP.gif";
function slice() {
var w = c.width = this.width;
var h = c.height = this.height;
var step = Math.PI / w; // half circle / width of canvas
var scale = 75; // max displacement on y
for(var x = 0, offset; x < w; x++) {
offset = Math.sin(step*x)*scale;
ctx.drawImage(this,
x, 0, 1, h, // source line from image
x, offset, 1, h - offset*2); // displaced line
}
}
<canvas id=c></canvas>
(对于垂直效果,只需参考上一个答案中的更改并应用偏移而不是公式)。