Javascript 在画布上挤压/折叠图像

如何在画布上捏/折叠图像的某个区域

不久前我制作了一个太阳系动画，我开始重写它。现在，我想给质量添加重力效果。为了使效果可见，我将背景变成了网格，我将对其进行修改

想要的效果是这样的（用PS制作）

---

---

更新：我在谷歌上搜索了一下，找到了一些资源，但因为我以前从未做过像素处理，所以我无法将它们放在一起

（仅限功能）

（带演示的WebGL库）

（球体化、缩放、旋转示例）

---

我想，倒过来的球形效果对这项工作是有好处的。

更新的答案 我显著提高了性能，但降低了灵活性

要获得收缩效果，需要使用遮罩，然后使用遮罩重新绘制图像。在这种情况下，使用圆形遮罩，在绘制原始图像的放大或缩小副本时缩小该遮罩。其效果是一个隆起或挤压

有一个质量设置，将给你从亚像素渲染到非常粗糙。就像这些东西一样，你牺牲速度来换取质量

由于硬件和浏览器之间的渲染速度不一致，我不建议将此作为满足您需求的最终解决方案

要获得一致的结果，您需要使用webGL。如果我有时间，我会写一个着色器来做这件事，如果还没有打开

这是一个纯画布2d解决方案。Canvas 2d可以做任何事情，它只是不能像webGL那样快，但它可以接近

更新： 重新编写示例以提高速度。现在使用剪辑比使用像素遮罩运行快得多。尽管新版本仅限于同时在两个轴上挤压凸起

有关更多信息，请参见代码注释。我已经尽力解释清楚了，如果你们有问题，一定要问。我希望我能给你一个完美的答案，但Canvas2D API需要进一步发展，这样的事情才能变得更可靠

var canvas=document.getElementById（“canV”）；
var ctx=canvas.getContext（“2d”）；
var createImage=函数（w，h）{//创建一个要求大小的图像
var image=document.createElement（“画布”）；
image.width=w；
image.height=h；
image.ctx=image.getContext（“2d”）；//将上下文固定到图像上
返回图像；
}
//amountX amountY效果的数量
//centerX，centerY效果的中心
//质量效果的质量。值越小，质量越高，但加工速度越慢
//图像，输入图像
//遮罩图像以保持遮罩。可以是不同的尺寸，但这会影响质量
//结果是渲染效果的图像
var pinchBuldge=函数（数量、质量、图像、结果）{
var w=图像宽度；
var h=图像高度；
var easeW=（数量x/w）*4；//从上到下从0单元到4单元
var wh=w/2；//延迟编码器的一半大小
var hh=h/2；
var阶跃单位=（0.5/（wh））*质量；
结果.ctx.drawImage（图像，0,0）；
对于（i=0；i<0.5；i+=stepUnit）{//所有操作均以标准化大小完成
var r=i*2；//归一化i
var x=r*wh；//获取相对于中心的剪辑x目标位置
var y=r*hh；//获取相对于中心的剪辑x目标位置
var xw=w-（x*2）；//获取剪辑目标宽度
var rx=（x）*easeW；//获取图像源位置
变量ry=（y）*easeW；
var rw=w-（rx*2）；//获取图像源大小
var rh=h-（ry*2）；
result.ctx.save（）；
result.ctx.beginPath（）；
结果.ctx.arc（wh，hh，xw/2,0，数学PI*2）；
result.ctx.clip（）；
结果.ctx.drawImage（图像，rx，ry，rw，rh，0,0，w，h）；
result.ctx.restore（）；
}        
//全部完成；
}
//创建所需的图像
var imageSize=256；//图像大小
var image=createImage（imageSize，imageSize）；//原始图像
var result=createImage（imageSize，imageSize）；//结果图像
image.ctx.fillStyle=“#888”//在图像中添加一些内容
image.ctx.fillRect（0,0，imageSize，imageSize）；//拍背景
//画一个网格不需要评论我希望这是不言而喻的
var-gridCount=16；
var grid=图像大小/网格计数；
变量样式=[[“黑色”，8]，“白色”，2]；
styles.forEach（函数（st）{
image.ctx.strokeStyle=st[0]；
image.ctx.lineWidth=st[1]；
对于（变量i=0；i<16；i++）{
image.ctx.moveTo（i*grid，0）；
image.ctx.lineTo（i*grid，imageSize）
image.ctx.moveTo（0，i*grid）；
image.ctx.lineTo（imageSize，i*grid）
}
image.ctx.moveTo（0，imageSize-1）；
image.ctx.lineTo（imageSize，imageSize-1）
image.ctx.moveTo（imageSize-1,0）；
image.ctx.lineTo（imageSize-1，imageSize）
image.ctx.stroke（）
});
var定时器=0；
var率=0.05
//质量0.5是亚像素高质量
//1是像素质量
//2是每2个像素
变量质量=1.5；//质量在OK
函数更新（）{
定时器+=速率；
var effectX=数学sin（计时器）*（图像大小/4）；
pinchBuldge（效果、质量、图像、结果）；
ctx.drawImage（结果，0,0）；
setTimeout（更新，10）；//在100毫秒内执行下一个操作
}
更新（）
.canC{
宽度：256px；
高度：256px；
}
我有时间重新审视这个问题，并提出了解决方案。首先，我需要了解计算和像素操作背后的数学原理，而不是直接解决问题

因此，我决定使用
粒子
，而不是使用图像/像素。JavaScript对象是我更熟悉的东西，因此很容易操作

我不会试图解释这个方法，因为我认为它是不言自明的，我试着让它尽可能简单


var canvas=document.getElementById（“ca
context.background("rgb(120,130,145)");
context.grid(25, "rgba(255,255,255,.1)");

var sun = {
    fill        : "rgb(220,210,120)",
    radius      : 30,
    boundingBox : 30*2 + 3*2,
    position    : {
        x       : 200,
        y       : 200,
    },
};
sun.img = saveToImage(sun);

context.drawImage(sun.img, sun.position.x - sun.boundingBox/2, sun.position.y - sun.boundingBox/2);

Bulges or pinches the image in a circle.

centerX   The x coordinate of the center of the circle of effect.
centerY   The y coordinate of the center of the circle of effect.
radius    The radius of the circle of effect.
strength  -1 to 1 (-1 is strong pinch, 0 is no effect, 1 is strong bulge)